Сохранение загруженного изображения на localStorage (расширение chrome)

Question

У меня возникли проблемы с поиском, как именно я хотел бы сохранить загруженное изображение в localStorage, введенное пользователем на моей странице параметров. Существует слишком много документации о том, как это сделать, потому что на некоторое время это был known error, и я не мог найти никаких примеров на Stack. Есть несколько примеров того, как сохранить изображение уже на странице, но ничего на введенном изображении.

Все, что у меня есть, это HTML, но я полагаю, что javascript, работающий в спине, должен получить доступ к значению ввода или что-то (?).

<input id="uploadImage" type="file" accept="image/*" /> 

Затем после того, как пользователь выбирает файл, значение ввода является C:\fakepath\some_image.jpg. Я не хочу хранить путь к файлу, но, если возможно, сохраняю фактическое изображение.

$("#uploadImage").change(function(){ 
    alert($("#uploadImage").val()); 
}); 

EDIT:

Я нашел пример о том, как это сделать из this stack topic, но FilePath, что я получаю от $("#uploadImage").val() не работает (Так что я не знаю, если этот метод работы работа, даже если путь_к_файлу было действительный)

var img = new Image(); 
img.src = $("#uploadImage").val(); 
img.load = function() { 
    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['uploadedImage'] = data; // save image data 
}; 

Answer 1

Это требует API FileReader, и это просто модифицированная версия этого ответа (исх : Loading an image to a <img> from <input file>):

var input = document.getElementById('uploadImage'); 
    input.onchange = function(evt){ 
     var tgt = evt.target || window.event.srcElement, 
      files = tgt.files; 

     if (FileReader && files && files.length) { 
      var fr = new FileReader(); 
      fr.onload = function() { 
       localStorage['foo'] = fr.result; 
      } 
      fr.readAsDataURL(files[0]); 
     } 
    } 

Вы могли бы применить его в качестве фонового изображения, делая что-то вроде:

var el = document.querySelector('body'); 
el.style.backgroundImage = 'url(' + localStorage['foo'] + ')'; 

Answer 2

Ну, это, как вы можете это сделать:

1. Прежде всего г и файл с помощью FileAPI. Хороший пример можно найти here
2. После того, как у вас есть файл, у вас возникнет другая проблема: как его сохранить. LocalStorage принимает только строки, поэтому вам нужно будет преобразовать ваш файл двоичного изображения в Base64, например. как они делают here
3. И, наконец, вы можете сделать изображение позже с помощью data-URI

Как вы можете видеть, это не так просто, но все же, если вы будете следовать инструкциям, вы можете это сделать.

Answer 3

Вы не можете открыть file:// URL-адресов из http:// или https:// URL-адресов, так как это нарушает безопасность (см this question), однако, если вы просто работаете на страницу HTML из file:// URL он должен работать с вашим кодом.

Вы должны убедиться, что холст элемент те же размеры, что и изображение, хотя, и также это лучшая практика, чтобы указать src атрибут после функции onload обратного вызова только в случае, если он загружает слишком быстро для onload обратного вызова привязка к месту.

Вы также должны убедиться, что используете нужный localStorage API для хранения и извлечения элементов из localStorage.

canvas.toDataURL() также является более аккуратным способом получения строки Base64 для данных изображения.

Вот обновленный код.

var img = new Image(); 
img.onload = function() { 
    var canvas = document.createElement('canvas'); 
    canvas.width = this.width; 
    canvas.height = this.height; 
    document.body.appendChild(canvas); 

    var context = canvas.getContext('2d'); 
    context.drawImage(img, 0, 0); 

    var data = canvas.toDataURL(); 
    localStorage.setItem('uploadedImage', data); // save image data 
}; 
img.src = 'file://' + $("#uploadImage").val(); 

Затем, чтобы получить элемент и использовать его как изображение на вашей странице, вы можете использовать:

var $img = $('<img />', { src: localStorage.getItem('uploadedImage') }); 
$('body').append($img);