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

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

animated-gif local-storage javascript

Tavish Aggarwal · 技术社区 · 7 年前

我需要将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 回复 | 直到 7 年前

douxsey 7 年前

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

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

推荐文章

Evgeniya Lashukova · 未捕获的TypeError:部署到Github页面时无法读取null的属性(读取“length”)

2 年前

StephenW · 如何在本地存储中更新时间戳?

2 年前

Raj Lama · 无法解析自定义路径目录以保存捕获的图像

6 年前

cnak2 · 无法分析localstorage angular 2

6 年前

yer · 如何从按钮下拉列表中获取值并将其保存在localStorage中?角度4

6 年前

Mark Gerryl Mirandilla · 本地存储中的阵列数据,在页面重新加载后重置

6 年前

Kenya JJ · 如何在LocalStorage中“保存”我的JS样式?

6 年前

rob.m · 如何在单击时增加本地存储中的数字?

6 年前

stack · 如何存储的结果。是否将each()放入本地存储?

6 年前

Ð¡ÑÑÐ¿Ð° ÐÐ°ÑÐºÐ°ÑÐ¾Ð² · 如何访问LocalStorage中对象内的数组长度

6 年前