JavaScript如何轉換二進制數據顯示成圖片
阿新 • • 發佈:2017-08-12
content head code binarys spa 找到 logs 文章 base64
使用JavaScript調用API返回了二進制數據格式的圖片,該如何顯示到網頁上?
首先,直接使用XMLHttpRequest,而不是AJAX,原因已經在前一篇文章中解釋。並將responseType設置為arraybuffer
var xhr = new XMLHttpRequest(); xhr.open(‘GET‘, ‘/my/image/name.png‘, true); xhr.responseType = ‘arraybuffer‘;
然後,將二進制轉成圖片源,我從網上搜索找到以下兩種方法,大家可以隨意選擇自己喜歡的。
方法一
var uInt8Array = newUint8Array(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如何轉換二進制數據顯示成圖片