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--将十进制数字转换成罗马数字显示

怎么把BASE64转换成HttpPostedFile求救了

图片二进制转换与存入数据库相关

如何用javascript或jquery实现图片与二进制的转换

sqlserver数据库中img类型的二进制数据怎么转换成图片,再怎么把图片转换成这个类型的二进制数据

从mysql数据库取出的图片数据流如何转换成图片放到文件夹内 - 技术问答