代码之家 › 专栏 › 技术社区 › Tavish Aggarwal

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

animated-gif local-storage javascript

Tavish Aggarwal · 技术社区 · 8 年前

我需要将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; 在本地存储中。我在控制台上也找不到任何错误。

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

2 回复 | 直到 8 年前

douxsey 8 年前

可能在执行代码时,图像尚未加载。因此,只有字符串“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');

Luca De Nardi 8 年前

这可能是因为跨源请求不允许您获取画布数据。你必须确保使用来自“可信”来源的图像(允许跨域来源的服务器),这样你的画布就不会被污染。