使用純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

也許在執行您的代碼時，圖像尚未加載。 因此，僅保存字符串'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

可能是由於跨域請求不允許您獲取畫布數據。 您必須確保使用來自“受信任”源（服務器允許您的域上的跨域）的圖像，以免畫布受到污染。