Как сохранять изображения в localStorage?
 

Подскажите где ошибка в коде ? Я пытаюсь сохранить изображение з гугл по урл в локальное хранилище, потом достать из хранилища изображение и вставить в DOM.

Вот мой код :

<canvas  id='example'></canvas>
<img id="imageId" src="" >

function getBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);

    var dataURL = canvas.toDataURL("http://shrek.by/Photo/Shrek.jpg");

    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}




var image = document.getElementById('imageId');
var b64image = getBase64Image(image);
localStorage.setItem('imageIdCached', b64image);

Вот весь код: http://jsfiddle.net/t52ka/123/

Сначала вопрос такой - вы это для себя хотите или же для посетителей вашего ресурса?

Валерий1996,
Во первых ваш скрипт выполняется до загрузки body и выдает ошибку. Во вторых вы не правильно пользуетесь АПИ canvas
https://developer.mozilla.org/en-US/...ment/toDataURL

Это не ресурс , это браузерное приложение . Поэтому нужна возможность подгружать картинки по урл , засововать в локальное хранилище, с возможностью потом достать картинку с локального хранилища.

У вас все не правильно, к тому же запрос по url породит ошибку SecurityError. Браузерное приложение это как, плагин к нему?

Валерий1996,
http://stackoverflow.com/questions/2...-securityerror

А если так: http://jsfiddle.net/bonilka/2f1kj48g/ ?

Это типа приложения на стороне клиента(браузера), написаное на клиетском, ява скрипте без использования сервера. Всё, что должно делать это прложение брать картинку по урл , сохранять её в локальное хранилище, чтоб можна было достать потом картинку и и вставить в dom

И получается так? И не получится. Чтобы задать размер канве, нужно дождаться окончания загрузки изображения. Задание атрибута crossOrigin изображению разрешит загрузить его в канву, а вот при получении его эта ошибка возникать будет, хотя и данные будут возвращены. Чтобы не надоедало, можно обернуть в try ... catch.

function getImg(im) {
    var canvas = document.createElement('canvas'),
        ctx = canvas.getContext('2d');
        
    canvas.width = im.width;
    canvas.height = im.height;
        
    try {
        ctx.drawImage(im, 0, 0);
        //base64 to localStorage
        var imageData = canvas.toDataURL();
        console.log(imageData);
    } catch (e) {}
}

<img id="imageId" crossOrigin="*" src="https://unsplash.it/300/200/?random" onload="getImg(this)"/>

Одно ли изображение, а значит и элементов сохранения, я не в курсе, как и о применении самого скрипта. Пример простой, разберетесь сами чего вам надо.

PS. toDataURL("image/png") - это лишено смысла, так как по умолчанию тип возвращаемого изображения и будет png, задание типа имеет смысл, если нужно вернуть в jpeg формате.

PPS. crossOrigin - заголовок, который передается сервером, и равен либо конкретному домену, либо всем (*). У изображения же можно написать просто crossOrigin и все. А если говорить о локальном приложение, то тогда либо VBS, либо если под win, можно HTA-приложение, и никаких ограничений не будет.