JavaScript如何轉換位元據顯示成圖片

標籤：res   log   ajax   arc   自己   src   .com   create   ase   

使用JavaScript調用API返回了位元據格式的圖片，該如何顯示到網頁上？

首先，直接使用XMLHttpRequest，而不是AJAX，原因已經在前一篇文章中解釋。並將responseType設定為arraybuffer

var xhr = new XMLHttpRequest();xhr.open(‘GET‘, ‘/my/image/name.png‘, true);xhr.responseType = ‘arraybuffer‘;

然後，將二進位轉成圖片源，我從網上搜尋找到以下兩種方法，大家可以隨意選擇自己喜歡的。

方法一

var uInt8Array = new Uint8Array(xhr.response);var i = uInt8Array.length;var binaryString = new Array(i);while (i--) {    binaryString[i] = String.fromCharCode(uInt8Array[i]);}var data = binaryString.join(‘‘);var imageType = xhr.getResponseHeader("Content-Type");$(‘#image‘).attr("src", "data:" + imageType + ";base64," + data)

方法二

var imageType = xhr.getResponseHeader("Content-Type");var blob = new Blob([xhr.response], { type: imageType });var imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);$(‘#image‘).attr("src", imageUrl);

 

JavaScript如何轉換位元據顯示成圖片