在javascript中顯示來自blob的圖像

Question

我正在使用localstorage html5。 首先，我將mysql數據庫值保存到localstorage然后我提取我想要的地方。很好。 我想將圖像（如產品圖像）保存到本地存儲中，然后想要將它們顯示在我想要的位置，

我做了一個實驗，因為我在blob中保存圖像在mysql中，我能夠使用PHP獲取和顯示它們但我不想在這里使用PHP，目的是離線working.i無法通過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" />

這需要您對數據進行編碼，並且某些瀏覽器的大小有限（例如，IE中為32kb）。