Как сохранить изображение локально из изображения URL с помощью jquery? - PullRequest
Новая
       16

Как сохранить изображение локально из изображения URL с помощью jquery?

0 голосов
/ 28 августа 2018

Я хочу хранить изображение локально и использовать его в любом месте приложения tizen.

Я попытался с помощью холста, но данные холста не показывают точное изображение, которое есть в 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);

1 Ответ

0 голосов
/ 28 августа 2018

Ваш код не работает, потому что вы хотите сохранить array в localStorage. Вместо context.getImageData() вы должны использовать canvas.toDataURL(), а затем преобразовать dataURL в строковое изображение Base64. После этого вы можете сохранить его в localStorage.

Ваше изображение должно быть в сети и в том же домене, что и ваш скрипт. Это из-за совместного использования ресурсов между источниками (CORS) . Но если вы преобразуете свое изображение, как я, в dataURL раньше, тогда у вас не должно возникнуть никаких проблем.

А к localStorage у вас сегодня (в 2018 году) доступ только в онлайн-режиме. Пожалуйста, прочитайте:

Полный пример

См. Этот рабочий пример на 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="#">
...