[Bug] 8 bit Grayscale images from Adobe appear pink after transform, when imageTransformOutputStripImageHead is set to false

[mthomsonnz]

Is there an existing issue for this?

• I have searched the existing issues

Have you updated FilePond and its plugins?

• I have updated FilePond and its plugins

Describe the bug

I am uploading 8 bit grayscale images from Adobe Photoshop. I would like the images to be resized, and keep the exif data after upload. When imageTransformOutputStripImageHead is set to false, the image appears pink after upload. In the image transform plugin, I can comment out this code, and the transform will not have the error:
// re-inject image head in case of JPEG, as the image head is removed by canvas export if (imageHead !== null) { blob = new Blob([imageHead, blob.slice(20)], { type: blob.type, }); }

In the imagetransform plugin - getImageHead() function, I guess the header info is sliced differently with the 8 bit image?

8 Bit Grayscale images exported from GIMP do not have this issue, only images from Adobe photoshop.

Any help is appreciated thanks.

Reproduction

I have attached an example image, if filepond is used with the transform plugin, with imageTransformOutputStripImageHead set to false, the error will happen.

I also attached an image showing the pink after transform.

Environment

- Device: HP Laptop
- OS: Windows 10
- Browser: Google Chrome

[mthomsonnz]

...also the image does seem to be compressed with exif retained when testing compressor.js https://fengyuanchen.github.io/compressorjs/ the getExif() and insertExif() seem to use a different method in this script.

[rikschennink]

EXIF reading and writing is custom logic, so it's possible that there's a bug in the FilePond read/write logic. I'm currently super busy but will try to pick this up somewhere in between other items.

[rikschennink]

I've tested the image with Pintura in which it does output the correct color scheme and doesn't throw errors. As Pintura can also integrate with FilePond this could be a workaround albeit not a free one.

I'll see if I can port some of the Pintura logic to FilePond.

[mthomsonnz]

Thanks very much. I also have this in my todo list, but have not had time also. My plan was to import the getExif() and insertExif() functions from compresser.js as these 2 functions work, and the 2 functions are small. They could possibly be useful, in addition to the pintura logic https://github.com/fengyuanchen/compressorjs/blob/main/dist/compressor.js

I am using upload in a GPL project, so I prefer to use MIT/GPL code if possible thanks.