使 FilePond Image Transform 插件忽略（动画）GIF答案

【问题标题】：Make FilePond Image Transform plugin ignore (animated) GIFs使 FilePond Image Transform 插件忽略（动画）GIF
【发布时间】：2019-11-22 17:08:26
【问题描述】：

我将 FilePond 与图像编辑器一起使用，因此我还加载了 Image Transform 插件。

但是，当用户上传 GIF 文件时，我希望输出的图像保持为 GIF 文件。目前它已通过 Image Transform 插件转换为 PNG。

有没有办法让 FilePond 在上传 GIF 文件时禁用 Image Transform 插件，或者以某种方式更改输出 mime-type？

【问题讨论】：

您好，您使用的是最新版本的图像转换插件吗？
@Rik 是的，我正在使用 FilePondPluginImageTransform 3.5.2
您是否设置了输出格式（imageTransformOutputMimeType）？您也可以尝试将imageTransformOutputQualityMode 设置为“可选”
@Rik 未指定输出格式。将imageTransformOutputQualityMode 设置为“可选”也不起作用。它仅在我将 allowImageTransform 设置为 false 时才有效。还尝试不将 Doka 配置为同样不起作用的 imageEditEditor。
奇怪，我明天或者下周初去看看。

标签： filepond

【解决方案1】：

请安装3.6.0版本的图像转换插件，并使用下面的功能过滤掉动画GIF图像。

动画 GIF 过滤器代码 sn-p 来自 Is it possible to detect animated gif images client side?

FilePond.create({
    imageTransformImageFilter: (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);

    })
});

【讨论】：