1888602 - Image corrupt or truncated 1024 x 100247 png doesn't display at full size

Status: UNCONFIRMED

(Core :: Graphics: ImageLib, defect, P3)

Description

[mo.xianglin]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36

Steps to reproduce:

To fetch a large image in segments, and then merge them to display on the webpage
Everything works fine in Chrome and Edge, but Firefox shows an error message(Image corrupt or truncated ) and the image cannot be displayed properly.

This is test image url:
https://storage-staging.passton.jp/images/2024/03/11/E0R6G8FKd3B3iLPO.png

Here is my code：
async splitPicture(callback) {
var imageParts = []
const chunkSize = 1024 * 1024
try {
const fileSize = await fetch(this.model.imageUrl, { method: 'HEAD' })
.then(response => parseInt(response.headers.get('Content-Length')))
const numChunks = Math.ceil(fileSize / chunkSize)

  for (let i = 0; i < numChunks; i++) {
    const startByte = i * chunkSize
    const endByte = Math.min((i + 1) * chunkSize - 1, fileSize - 1)
    const blob = await this.fetchImagePart(this.model.imageUrl, startByte, endByte)
    imageParts.push(blob)
  }

  const combinedBlob = new Blob(imageParts, { type: 'image/png' })
  const partialImageUrl = URL.createObjectURL(combinedBlob)

  this.paper.options.background.image = partialImageUrl
  callback()
} catch (error) {
  console.log(error)
}

}

Actual results:

Firefox shows an error message(Image corrupt or truncated ) and the image cannot be displayed properly.

Expected results:

The image can be displayed success

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Graphics: ImageLib' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Timothy Nikkel (:tnikkel)]

So it's a 1024 x 100247 png that doesn't display at full size? What is the code for? Do I need to do anything with it?