javascript - 如何使用 jquery 从图像 URL 在本地存储图像？

Question

我想在本地存储图像并在 tizen 应用程序的任何地方使用它。

我尝试使用 Canvas ，但 Canvas 数据 uri 未显示 URL 中的确切图像。

我正在使用的代码片段。

var img = new Image();
img.src = imageURL;

var canvas = document.createElement('canvas');

document.body.appendChild(canvas);

var context = canvas.getContext('2d');

context.drawImage(img, 0, 0);

var data = context.getImageData(x, y, img.width, img.height).data;

localStorage.setItem('image', data);

Answer 1

您的代码不起作用，因为您希望将数组 保存到localStorage。您必须使用 canvas.toDataURL() 而不是 context.getImageData()，然后将 dataURL 转换为 Base64 字符串图像。在此之后，您可以将其保存到 localStorage。

您的图像必须在线并且与您的脚本位于同一域中。是因为 Cross-origin resource sharing (CORS) .但是如果你之前像我一样在 dataURL 中转换你的图像，那么你应该没有任何问题。

对于 localStorage，您今天(2018 年)只能在在线模式下访问。请阅读:

• > localStorage access from local file

完整示例

在 codepen.io 上查看这个工作示例(链接到示例)因为在 StackOverflow 上，代码段是沙盒化的，因此我们无法访问 localStorage。

var canvas = document.createElement('canvas');
var image = new Image();
var ctx = canvas.getContext('2d');

image.onload = function()
{
    canvas.width = image.width;
    canvas.height = image.height;

    ctx.drawImage(image, 0, 0);

    var dataURL = canvas.toDataURL('image/png');

    var Base64StringImage = dataURL.replace(/^data:image\/(png|jpg);base64,/, "");

    localStorage.setItem('image', Base64StringImage);

    //read from localStorage:
    document.querySelector('img').src = 'data:image/png;base64,' + localStorage.getItem('image');
};

image.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAA7EAAAOxAGVKw4bAAADnElEQVRYhaWXz2/cRBTHP/Y4zka0ShPQJluJLkl/0EsSl24OCAgRFQoH1Ir/oNmeEJdScYUDXOitSBxASFmQ4MSJay6EtojLgvIDCUKhaQIipCI/SlKy690Zc2jWa3ttT4Tn9p3v6H3fe/Pm2c/wPM/jYC25n1Nnl5L9emuLDbnIgBj18ba6S5857ONPHz5P3MqbIzh2meNi3N+Ls28Fye8bH/lE69C8O8NUzw1/f8GtMJl7L1Y0STjNvhUkz1iXsI0j/Nj4wj+0rqqhLPwpqx1ZSRPW2beC5LP2WxiGAeAfistCEKcJR8Xj7Ft1dgGwjSM+2c1RAFxvD6AjC0G8o+4xV3unQzgvRnC6yujsW627aHnUzdGQx780v0rNgnsg4AtHMvKEOJtq32rdRfBQNF3BqJNw2lWk2beih1xvr0M8GHUU62pAZ9/4q7ngpb3zb+vvs6XusKmWQwaPGUMURIkm+6n8T80vYx0qmOdx7DJmNKoFtxLCf6ufeTX3CRe6r/O4+TTHjCEmu9/lUs9n7KgVLR9dg+Y5Xsl9yFTPBwyIMSzdO99Wv7Imb1O0JthWK7js8pT1EhtykXVVBdDyAAPmGI59hYJ4JuSQBenvHGC+McMDtcoPjY/9vU25fCg+b44e1Egp9iosSH/nAMprhJ6b6+0hqfs4jd9RK8zV3u4QLojzOPZ0+xWkZWHMvsyw9TJg+FW8rqrM1t7U8tE+MWiew7GvMCicdgaCUUdxr1FkSFxgQy6yKZeR1FlXVY6LcfLmCHXvn1T+vloCkmvAqOw953+OC2aJTbXse10wS/SaT/JA/R4qKHjUePJilKb3byp/Xy6l18Dlx27HEtvqLgtuBUmjI41wcM+eq+VzRi+ztav+/gnxAmvyVtuBJOF7cg7w6DNPcTE3wx/yO+YbM0jPxbGnKYpJZmvXqLGTyo/bb4QEna5yvANR4fZ+tj7QL06Hoo5iK0k4uLL0gbiog9jqM4djf7Hajn2dqQ/ERR3E2hqAbH1AlwVtDWTtA9EsRLGxJX/z0mrgrPVapj4Q/AXfknfoF6dD2NDNBUmrlTGFZE3e9PdPiIkQDvaZ/zUXJAm3MnYxVwkJOl3TIayzr50LkoRb69FdtqOOYp197Vxw0prS9gnHLrO2f8vngzjzXKDrEwD95imKYoJV+U0HzjwXJAlHMzJml1ndv9mBdfYPPRfoWna/eZKieDEWZ5oLDvOtaC3Hnk7ESfb/A1K3qRpcj5DtAAAAAElFTkSuQmCC';

<img src="#">