データベースからBlob画像を取得していますが、JavaScriptを使用してその画像を表示できるようにしたいと思います。次のコードは、ページに壊れた画像アイコンを生成します。
var image = document.createElement('image');
image.src = 'data:image/bmp;base64,'+Base64.encode(blob);
document.body.appendChild(image);
これはjsFiddleです blobを含む、必要なすべてのコードが含まれています。完成したコードは画像を適切に表示するはずです。
問題は、base64でエンコードする前にバイナリに変換する必要がある16進データがあることです。
pHPの場合:
base64_encode(pack("H*", $subvalue))
XMLHttpRequestからBLOBオブジェクトを直接取得することもできます。 responseTypeをblobに設定するとうまくいきます。ここに私のコードがあります:
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://localhost/image.jpg");
xhr.responseType = "blob";
xhr.onload = response;
xhr.send();
そして、応答関数は次のようになります。
function response(e) {
var urlCreator = window.URL || window.webkitURL;
var imageUrl = urlCreator.createObjectURL(this.response);
document.querySelector("#image").src = imageUrl;
}
HTMLで空の画像要素を作成するだけです。
<img id="image"/>
代わりにフェッチを使用する場合:
var myImage = document.querySelector('img');
fetch('flowers.jpg').then(function(response) {
return response.blob();
}).then(function(myBlob) {
var objectURL = URL.createObjectURL(myBlob);
myImage.src = objectURL;
});
ソース:
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
あなたの例では、createElement('img')
である必要があります。
リンクで、base64blob != Base64.encode(blob)
。
これは、データが有効である限り機能します http://jsfiddle.net/SXFwP/ (BMPはありませんでした)画像なので、PNGを使用する必要がありました。
文字列を int8Array に変換して、生データを取得できます。次に、そのデータに対して Blob を作成し、 RL.createObjectURL(blob) に渡して、Blobを img.src に渡すURLに変換します=。
var data = '424D5E070000000000003E00000028000000EF...';
// Convert the string to bytes
var bytes = new Uint8Array(data.length / 2);
for (var i = 0; i < data.length; i += 2) {
bytes[i / 2] = parseInt(data.substring(i, i + 2), /* base = */ 16);
}
// Make a Blob from the bytes
var blob = new Blob([bytes], {type: 'image/bmp'});
// Use createObjectURL to make a URL for the blob
var image = new Image();
image.src = URL.createObjectURL(blob);
document.body.appendChild(image);
完全な例を試すことができます: http://jsfiddle.net/nj82y73d/
画像のインラインコードにエラーがあったと思います。これを試して :
var image = document.createElement('img');
image.src="data:image/gif;base64,R0lGODlhDwAPAKECAAAAzMzM/////wAAACwAAAAADwAPAAACIISPeQHsrZ5ModrLlN48CXF8m2iQ3YmmKqVlRtW4MLwWACH+H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw==";
image.width=100;
image.height=100;
image.alt="here should be some image";
document.body.appendChild(image);