如何使用 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

您的代码不起作用，因为您要将 array 保存到 localStorage。您必须使用 canvas.toDataURL() 而不是 context.getImageData()，然后将 dataURL 转换为 Base64 字符串图像。之后你可以将它保存到 localStorage.

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

并且 localStorage 您今天（2018 年）只能在在线模式下访问。请阅读：

localStorage access from local file

完整示例

请参阅 codepen.io 上的这个工作示例（例如 link），因为在 Whosebug 上，代码段是沙盒化的，因此我们不能访问 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="#">

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

How to store image locally from image URL by using jquery?

javascript

jquery

tizen

tizen-web-app