JavaScript如何转换二进制数据显示成图片
Posted 阳光de混
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript如何转换二进制数据显示成图片相关的知识,希望对你有一定的参考价值。
使用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如何转换二进制数据显示成图片的主要内容,如果未能解决你的问题,请参考以下文章
如何用javascript或jquery实现图片与二进制的转换