使用 pure JavaScript 将动画 GIF 图像存储在本地存储中

Question

我有一个要求，我需要将 GIF 图片存储在本地存储中。我一直在尝试使用以下代码来做到这一点：

function imgToURI(image) {
    var canvasTemp = document.createElement('canvas');
    canvasTemp.width = image.naturalWidth; // or 'width' if you want a special/scaled size
    canvasTemp.height = image.naturalHeight; // or 'height' if you want a special/scaled size
    canvasTemp.getContext('2d').drawImage(image, 0, 0);
    var dataUri = canvasTemp.toDataURL('image/gif');
    // Modify Data URI beginning
    dataUri = 'data:image/gif;' + dataUri.substring(15);
    return dataUri;
}


window.onload = function () {
    var img = new Image();
    img.src = 'http://pop.h-cdn.co/assets/16/33/480x264/gallery-1471381857-gif-season-2.gif';
    localStorage.setItem('test', imgToURI(img));
};

以上代码在本地存储中输出data:image/gif;。我也找不到控制台上的任何错误。

我已经尝试了很多，但不知道为什么没有存储图像。如果您有解决上述问题的方法，请告诉我。

Answer 1

这可能是由于跨源请求不允许您获取 canvas 数据。您必须确保使用来自 "trusted" 来源（允许在您的域上跨源的服务器）的图像，这样您的 canvas 就不会被污染。

Answer 2

可能在执行您的代码时图像尚未加载。所以只有字符串 'data:image/gif 会被保存

var img = new Image();  
    img.addEventListener('load', function() {
      localStorage.setItem('test', imgToURI(img));
    }, false);
    img.src = 'http://pop.h-cdn.co/assets/16/33/480x264/gallery-1471381857-gif-season-2.gif';

此代码仅在图像完全加载后才会尝试保存图像

编辑

您遇到此错误是因为图像不是来自您的服务器：此 CORS 问题。你可以试试这个，但你必须信任托管图像的服务器

就在 addEventListener

之前

img.setAttribute('crossOrigin', 'anonymous');

使用 pure JavaScript 将动画 GIF 图像存储在本地存储中

Store animated GIF image in local Storage using pure JavaScript

javascript

local-storage

animated-gif