filepond
filepond copied to clipboard
Image Resize Plugin: Animated GIFs being converted to PNG
Is there an existing issue for this?
- [X] I have searched the existing issues
Have you updated FilePond and its plugins?
- [X] I have updated FilePond and its plugins
Describe the bug
When uploading a GIF, currently there is no way to filter out GIFs from the image resize plugin, causing them to be converted into PNGs.
Reproduction
I tried to create an imageResizeFilter (similar to the below link), but this does not seem to work. https://stackoverflow.com/questions/1326890/is-it-possible-to-detect-animated-gif-images-client-side
const FilePond = vueFilePond(
FilePondPluginFileValidateType,
FilePondPluginFileValidateSize,
FilePondPluginImagePreview,
FilePondPluginImageEdit,
FilePondPluginImageCrop,
FilePondPluginImageResize,
FilePondPluginImageTransform,
);
FilePond.create({
imageResizeImageFilter: (file) => new Promise(resolve => {
// no gif mimetype, do transform
if (!/image\/gif/.test(file.type)) return resolve(true);
const reader = new FileReader();
reader.onload = () => {
var arr = new Uint8Array(reader.result),
i, len, length = arr.length, frames = 0;
// make sure it's a gif (GIF8)
if (arr[0] !== 0x47 || arr[1] !== 0x49 ||
arr[2] !== 0x46 || arr[3] !== 0x38) {
// it's not a gif, we can safely transform it
resolve(true);
return;
}
for (i=0, len = length - 9; i < len, frames < 2; ++i) {
if (arr[i] === 0x00 && arr[i+1] === 0x21 &&
arr[i+2] === 0xF9 && arr[i+3] === 0x04 &&
arr[i+8] === 0x00 &&
(arr[i+9] === 0x2C || arr[i+9] === 0x21)) {
frames++;
}
}
// if frame count > 1, it's animated, don't transform
if (frames > 1) {
return resolve(false);
}
// do transform
resolve(true);
}
reader.readAsArrayBuffer(file);
})
I am also using Vue js. So any help or guidance would be appreciated.
Environment
- Device:Laptop, Dell
- OS:Linux, uBuntu 20.04
- Browser:Chrome