Это хорошая идея хранить изображения в localStorage?

Я создаю HTML/Javascript инструмент, который что-то делает с изображениями. Честно говоря, я просто использую HTML, потому что Java или C++ GUI слишком сложны и не стоят усилий.Это хорошая идея хранить изображения в localStorage?

Инструмент просто отображает изображение, а затем отображает percentual и абсолютные координаты при наведении на изображение:

image description

Моя цель состоит в том, чтобы создать небольшой графический интерфейс для «Last изображений», позволяющий быстро отображать недавние образ. И поскольку приложение является клиентским, я не могу использовать какое-либо серверное хранилище. Есть объект localStorage, но мне кажется, что плохая идея сохранить в нем несколько МБ изображений.

Как вы думаете? Должен ли я использовать для этого localStorage? Или есть альтернатива? Или, возможно, сотрудничество с сервером абсолютно необходимо?

источник

2015-02-03 Tomáš Zato

Вы можете использовать локальное хранилище и сохранить изображение в виде файла Base64. Но если файл слишком большой, местное хранилище не рекомендуется. И вам, возможно, потребуется использовать некоторые вспомогательные программы. JS плохо работает с файлами. – joydesigner

Да, я знаю, как это сделать. Но я не уверен, что все в порядке. –

вы просматривали File API? http://www.w3.org/TR/FileAPI/ http://html5demos.com/file-api – Stuart

Это либо, что либо с помощью HTML5 File API, но если вы просто экономить несколько изображений под 5mb HTML5 WebStorage должно быть достаточно, как это:

Если вы используете веб-хранилище, и HTML5 Canvas конвертировать изображение в текст (данные URI):

var img = new Image(); 
    img.src = "same_origin.png"; 

localStorage.setItem("lastImage",imgToURI(img)); 


function imgToURI(img){ 
    var canvas = document.createElement("canvas"); 
    var context = canvas.getContext("2d"); 
    canvas.width = img.width; 
    canvas.height = img.height; 
    context.drawImage(img,0,0); 
    return canvas.toDataURL(); 
}

А затем для получения сохраненного изображения:

var last = new Image(); 
    last.src = localStorage.getItem("lastImage1");

Примечание: Большинство браузеров разрешают только 5 МБ локального хранилища.

Примечание: В то время как localStorage высоко поддерживается canvas это не поддерживается в IE8.

Примечание: HTML File API подход не будет дружественным к пользователю, как сейчас Chrome является единственным позволяет писать файлы с их API файловой системы, для остальных вы будете необходимо преобразовать изображения в uri данных, затем сделать ссылку со всеми данными в виде текстового файла uri данных и загрузить его пользователя и перезагружать его каждый раз.

Надеюсь, это поможет!

источник

2015-02-03 02:27:34 undefined

См. http://stackoverflow.com/questions/22097747/getimagedata-error-the-canvas-has-been-tainted-by-cross-origin -data – guest271314

Вы можете использовать алгоритм сжатия для сжатия строкового представления изображений base64. Я использовал подобный подход в своем коде, и мне было предложено хранить больше изображений по сравнению с обычным случаем.

Сжатие Lib: LZstring http://pieroxy.net/blog/pages/lz-string/index.html

источник

2015-02-03 02:57:41 Vijay

Интересно, в чем цель base64, когда другая библиотека генерирует сжатые данные. Может ли base64 просто быть пропущенным в этом случае? –

LZstring сжимает только строковые данные. Кроме того, base64 будет легче, чем фактическое изображение. – Vijay

Это хорошая идея хранить изображения в localStorage?

ответ

Смежные вопросы