установка фона CSS для изображения в локальном хранилище - PullRequest
Новая
       30

установка фона CSS для изображения в локальном хранилище

4 голосов
/ 19 февраля 2012

Я хочу поместить изображение в формате base64, которое хранится в локальном хранилище в ключе ImgStorage, например, на фоне css: 

data:image/png;base64,iVBORw0KGgoAAAANS......

Пока чтопробовал два подхода:

1) загрузка из хранилища и вставка в тег css: 

var TheImage = localStorage.getItem('ImgStorage');
$('body').css({ 'background-image': "url(" + TheImage) });

2) воссоздание холста из данных хранилища: 

var Canvas = document.createElement("canvas");
Canvas.width = 50;
Canvas.height = 50;
var Context = Canvas.getContext("2d");

var TheImage = localStorage.getItem('ImgStorage');

Context.drawImage(TheImage, 0, 0);
Canvas.toDataURL("image/png");

$('body').css({ 'background-image': "url(" + Canvas.toDataURL("image/png") + ")" });

Я смотрел в Интернете, но все примеры говорят о получении изображения в хранилище для рендеринга внутри тега <img>.

Кто-нибудь решилэто для фона css?

В дополнение к этому, с точки зрения производительности, если вы base64 кодируете свои изображения, вы можете отправлять их в теле HTML-страницы без каких-либо дополнительных запросов.Например, если вам нужно загрузить 20 изображений для вашего пользовательского интерфейса, это на 20 запросов меньше.И, если вы храните каждое изображение в локальном хранилище, вам нужно загрузить их только один раз.Не работает для старых браузеров, поэтому он работает только для 80% браузеров, но все же .... что-то нужно учитывать, потому что время на вашей стороне в плане эволюции браузера.

1 Ответ

4 голосов
/ 19 февраля 2012

хорошо, это для тех, кто заходит на эту страницу после того, как подпрыгивает: Я ПОЛУЧИЛ ЭТО РАБОТАТЬ !!!!

Используя вариант 1), вы просто пишете это: 

var TheImage = localStorage.getItem('ImgStorage');
$('body').css({ 'background-image': "url(" + TheImage + ")" });

Другими словами, вам не нужно тратить время на воссоздание холста, как я пытался с вариантом 2), просто идите прямо.

...