Хранить изображения в объекте Javascript

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

Я хочу знать, преобразуются ли некоторые образы в двоичную форму. Могут ли они быть обращены к изображениям с помощью JavaScript?

Ответ 1

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

В основном, вы кодируете изображение как строку base64, а затем устанавливаете его как источник элемента DOM. Установка источника объекта Image на URL-адрес не эквивалентна, поскольку для этого требуется HTTP-соединение добавления.

var data = 'data:image/gif;base64,'+
    'R0lGODlhAAEwAMQAAJ2M5Me98GRK1DoYyYBr3PHv++Pe99XO81Y50auc6PBkZEgpzbmt7HJa2I57'+
            // snip //
    'fS3CqU7XGYgE+GqHvrLJ8Tr6qXmqiwAF9CffgnMNqmWHAWNBwwGsKpKsrmJqltOOV69nuYxSkqpo'+
    'Tata18rWtrr1rTIIAQA7';
var icon_elem = document.getElementById("icon_here");
icon_elem.src = data;

Вышеприведенный код и полный пример можно найти здесь: http://www.kawa.net/works/js/data-scheme/base64-e.html

Ответ 2

Вы можете просто использовать

var img = new Image();
img.src = "http://yourimage.jpg";

чтобы создать изображение DOM.

Изображение DOM - это объект в памяти, который содержит двоичную форму изображения, поэтому нет необходимости преобразовывать его обратно в образ, поскольку он уже один.

Ответ 3

Видите, это просто. Но метод подхода к этой проблеме - это не то, как вы пытаетесь сейчас.

То, что вы думаете, будет работать:
Мы сохраним изображение (его двоичные данные) в переменной js, а затем удалим его на странице в любое время.

Как это будет работать намного проще:
вам просто нужно создать изображение DOM на странице и установить его источник. Браузер автоматически загрузит изображение с сервера.

Примеры:

ех-1:

var img_src = "http://someserver/yourimage.png";
var node = document.getElementById('the-node-in-which-i-want-my-image');
node.innerHTML = "<img src='"+img_src+"' alt='my image'>";

ex-2: (используя jquery) - это по существу то же самое, что и выше, гораздо проще написать:

var img_src = "http://someserver/yourimage.png";
$('#the-node-in-which-i-want-my-image')
    .html("<img src='"+img_src+"' alt='my image'>");

Теперь еще одна вещь: браузер начинает получать изображение после запуска этого кода, поэтому изображение появляется немного после того, как вы вставляете его в DOM.

Чтобы предотвратить это, вы можете предварительно извлечь изображения, используя:

var prefetch = new Image();
prefetch.src = "http://someserver/yourimage.png";

Ура!