使用 gifshot 从 base64 字符串数组创建 gif 在 Firefox 中不起作用答案

【问题标题】：Using gifshot to create gifs from array of base64 strings doesn't work in Firefox使用 gifshot 从 base64 字符串数组创建 gif 在 Firefox 中不起作用
【发布时间】：2015-12-25 12:40:34
【问题描述】：

我正在尝试使用 gifshot 库从画布创建 gif。我正在使用canvas.toDataURL() 捕获画布，将这些结果存储在一个数组中，然后将该数组传递给 gifshot 函数。这在 Chrome 和 IE 中运行良好，但在 FF 中永远不会创建 gif。我可以看到 Firefox 在 DOM 中创建了每个“帧”的临时图像，但由于某种原因，图像加载的 onerror 部分被命中，而不是实际的 onload。我不知道为什么。

我真的不知道该尝试什么。这是一种直截了当的方法：只需将一组图像传递给 gifshot 函数。

function createGif(array) {
    gifshot.createGIF({
        images: array
    }, function (obj) {
        if (!obj.error) {
            var image = obj.image,
                animatedImage = document.createElement('img');
            animatedImage.src = image;
            document.body.appendChild(animatedImage);
        }
    });
}

array 是 base64 字符串。传递类似 imgur 链接的东西（如在他们的示例中）就可以了。这只是FF不喜欢的base64字符串数组。我在FF中检查过，正在传递的数组很好。

这里以 jsfiddle 为例：http://jsfiddle.net/dxdn6s3h/2/。适用于 IE/Chrome，不适用于 FF。

【问题讨论】：

你有没有想过这个问题？我有同样的问题。检查 dom，我也看到了那些临时图像，每个图像上都有 crossorigin="Anonymous"。
@calipoop 对不起，我从来没有弄明白。我最终改用了 gif.js。话虽如此，我只是在我的问题中尝试了那个 jsfiddle 链接，现在它似乎在 FF 中工作。

标签： javascript jquery

【解决方案1】：

我也在使用 gifshot，我发现我需要单独初始化 Image 对象并将其添加到数组中。下面的代码更清晰：

var images = [];
var oneImage = new Image();
oneImage.src = base64ImageString;
images.push(oneImage);

然后使用您的代码导出 gif 图像。希望这篇文章可以帮到你:)

【讨论】：