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

Question

我正在尝试使用 gifshot从 Canvas 创建 gif 的库。我正在使用 canvas.toDataURL() 捕获 Canvas ，将这些结果存储在一个数组中，然后将该数组传递给 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 中不工作。

Answer 1

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

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

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