码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2017-08-12 17:10:09      阅读:114      评论:0      收藏:0      [点我收藏+]

标签: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如何转换二进制数据显示成图片

标签:res   log   ajax   arc   自己   src   .com   create   ase   

原文地址:http://www.cnblogs.com/hula100/p/7350628.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!