Unknown version

[wymanchung]

Describe the bug I'm using Image component to render from URL object The URL is an application/octet-stream response of a JPG file and it could be saved and opened if downloaded. Console gives Warning: "Unknown version". I've got different version number with different JPG

To Reproduce When the following component is saved as blob

<Image
  src={{
	uri: `/api/frs/fileInfo/${doc.id}`,
	method: "GET",
	headers: {
	  ...getAuthHeader().headers,
	},
	body: "",
  }}
/>

Expected behavior The JPG should be embedded in PDF

Error Log Error: Unknown version 47178 at VersionedStruct.decode (http://localhost:3000/static/js/bundle.js:358332:13) at ArrayT.decode (http://localhost:3000/static/js/bundle.js:357070:28) at ArrayT.fromBuffer (http://localhost:3000/static/js/bundle.js:357144:17) at Object.decode (http://localhost:3000/static/js/bundle.js:356206:24) at new JPEG (http://localhost:3000/static/js/bundle.js:298158:65) at getImage (http://localhost:3000/static/js/bundle.js:298253:14) at _callee3$ (http://localhost:3000/static/js/bundle.js:298376:45) at tryCatch (http://localhost:3000/static/js/bundle.js:295263:16) at Generator.<anonymous> (http://localhost:3000/static/js/bundle.js:295351:17) at Generator.next (http://localhost:3000/static/js/bundle.js:295292:21)

Desktop (please complete the following information):

• OS: Windows
• Browser: Chrome
• React-pdf version: v3.4.3

[sntlln93]

Did you fix it somehow? I'm having the same issue. The following gives Unknown version 0

<Image
    src={{
      uri: item.photo,
      method: "GET",
      body: "",
      headers: "",
    }}
    style={styles.photo}
  />

<Image
    src={item.photo}
    style={styles.photo}
  />

item.photo is similar to this blob:http://host/54561466-20cf-49d4-bb1e-325f55b242a2 and it was generated from a jpg uploaded by the user using URL.createObjectURL(uploadedPhoto).

[wymanchung]

@sntlln93 In my case, the jpg blob is recognized by the canvas but not react-pdf. I used some workaround to render the image in a hidden canvas and export image back into a blob

async function convertJpgBlobToCanvasBlob(jpgBlob: Blob): Promise<Blob> {
  return new Promise((resolve, reject) => {
    const img = document.createElement("img");

    img.onload = () => {
      const canvas = document.createElement("canvas");
      const ctx = canvas.getContext("2d");

      canvas.width = img.width;
      canvas.height = img.height;

      ctx?.drawImage(img, 0, 0);

      canvas.toBlob((canvasBlob) => {
        if (canvasBlob) {
          resolve(canvasBlob);
        } else {
          reject(new Error("Failed to convert image to canvas blob."));
        }
        canvas.remove();
      }, "image/jpeg");
    };

    img.onerror = () => {
      reject(new Error("Failed to load image."));
    };

    img.src = URL.createObjectURL(jpgBlob);
  });
}

So the final output would be something like this

<Image
  src={FrsFileService.downloadFile(id).then((data) => {
    return convertJpgBlobToCanvasBlob(data);
  })}
/>

[sntlln93]

I see, thank you. In my case I was on a rush so I ended up using react-to-print instead of react-pdf.

[diegomura]

This seems to be a problem with a JPEG image you are using. Can you provide the failing document?

[mfanselmo]

Hey! I have also been running into this issue. @diegomura here is a image that fails if added to a document

[StaticPrime]

@wymanchung @diegomura I'm having the same issue as well. It seems to be a compatibility issue with pictures taken with iPhones.

It looks like the problem may be in packages/image/src/jpeg.js Line 17: const markers = _JPEG.decode(this.data);

Could it be that jay-peg is the issue? Possibly throwing the exception while trying to decode the JPEG file?

Here is a link to the image I'm using that is also causing the problem:

https://firebasestorage.googleapis.com/v0/b/doorcast-ad7e7.appspot.com/o/inspections%2F63ebb9d9aed95bfc5a7863b6%2F666c486021f0073350b997ce%2F20417557-6fd6-4209-bfbb-b930e4911ea9.jpeg?alt=media&token=20417557-6fd6-4209-bfbb-b930e4911ea9

[SimtecConsult]

Did this issue ever get resolved? I am still seeing it when photos are taken on an Apple device?

[StaticPrime]

@SimtecConsult i believe this is still a problem