filepond icon indicating copy to clipboard operation
filepond copied to clipboard

Image Resize Plugin: Animated GIFs being converted to PNG

Open stevendprinsloo opened this issue 1 year ago • 0 comments

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

stevendprinsloo avatar Jun 08 '23 09:06 stevendprinsloo