JavaScript如何转换二进制数据显示成图片

最新推荐文章于 2024-06-04 08:37:25 发布

原创最新推荐文章于 2024-06-04 08:37:25 发布 · 8.3k 阅读

10 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

当前文章被以下社区和专栏收录：

本文介绍了如何使用JavaScript通过API获取二进制图片数据并将其显示到网页上。首先设置XMLHttpRequest的responseType为arraybuffer，接着通过转换二进制数据为base64字符串或者创建Blob对象来生成图片源。提供了两种方法，一种是将二进制数据转换为base64编码直接设置为img标签的src属性，另一种是创建Blob URL来显示图片。这两种方法都涉及到对二进制数据的处理和图片在网页上的渲染技术。

使用JavaScript调用API返回了二进制数据格式的图片，该如何显示到网页上？

首先，直接使用XMLHttpRequest，并将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);

标签