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

也许当您的代码被执行时，图像尚未加载。所以只保存字符串'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');

Answer 2

可能是由于Cross-Origin请求不允许您获取画布数据。您必须确保使用来自“受信任”源（服务器允许在您的域上使用Cross-Origin）的图像，以便您的画布不会受到污染。

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

2 个答案: