Показать изображение из BLOB-объекта в JavaScript

Question

Я использую местное хранилище HTML5. сначала я сохраняю значения базы данных mysql в localalstorage, затем выбираю, где хочу. я хочу сохранить изображения (например, изображения продуктов) в хранилище, а затем показать их там, где я хочу,

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

кто-нибудь может мне помочь?? Там может быть два пути,

Во-первых, можем ли мы зашифровать изображение (я должен указать путь к изображению) в виде какой-то строки в javascript и затем я могу показать это где угодно.

Второй способ... Как я уже сказал, я сохранил его в BLOB-объекте. Могу ли я использовать JavaScript, чтобы просто показать изображение из BLOB-объекта. Кстати, я могу легко отобразить значение из базы данных. Теперь единственное, что нужно сохранить это значение в javascript и показать его изображение, где я хочу.

Я буду ждать ответа спасибо:)

Answer 1

Вы также можете использовать URL.createObjectURL(blob) указано здесь и для кросс-браузерной совместимости, проверьте это:

var uri = URL.createObjectURL(blob);
var img = new Image();

img.src = uri;
document.body.appendChild(img);

Answer 2

Вы можете использовать Data URI scheme для изображений:

<img src="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP
C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA
AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J
REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq
ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0
vr4MkhoXe0rZigAAAABJRU5ErkJggg==" alt="Red dot" />

Это требует от вас кодирования данных, и в некоторых браузерах существует ограничение на размер (например, 32 КБ в IE).