首页 > 网络编程 > JavaScript > javascript技巧 > js 二进制流转图片

js 二进制流转图片的操作方法

2023-12-20 11:22:58 作者：涌。。

这篇文章主要介绍了js 二进制流转图片的操作方法,接收数据大家需要注意,如果后端的接口是get方法,可以直接使用img标签,本文通过示例代码讲解的非常详细,需要的朋友参考下吧

前端接收后端返回的二进制流并转换成图片验证码

在这里插入图片描述

一、接收数据

1）如果后端的接口是get方法，可以直接使用img标签

<img id="canvas_img" src="http://localhost:9999/api/image_verifty" alt="">

2）使用axios

html

<img id="canvas_img" src="" alt="">

axios({
   url:'/api/image_verifty',
   method:'get',  //默认get方法，可以不写
   responseType:'arraybuffer'  //或者是blob
}).then(res=>{
   let canvas_img = document.querySelector('#canvas_img');
   let imageType = res.headers['content-type'];   //获取图片类型
   const blob = new Blob([res.data], { type: imageType })
   const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
   canvas_img.src = imageUrl;
   canvas_img.onload = function(e) {
       window.URL.revokeObjectURL(canvas_img.src);  //释放URL.createObjectURL()创建的对象
   };
})

3）使用ajax

html

<img id="canvas_img" src="" alt="">

let xmlhttp;
if (window.XMLHttpRequest) {
  xmlhttp = new XMLHttpRequest();
} else {
  // 兼容 IE6, IE5
  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","/api/image_verifty",true);
xmlhttp.responseType = 'arraybuffer'; //或者是blob
xmlhttp.onload = function(){
    //请求成功
    if (this.status == 200) {
      let canvas_img = document.querySelector('#canvas_img');
      let imageType = xmlhttp.getResponseHeader("Content-Type");
      const blob = new Blob([this.response], { type: imageType });
      const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
      canvas_img.src = imageUrl;
      canvas_img.onload = function(e) {
          window.URL.revokeObjectURL(canvas_img.src);  //释放URL.createObjectURL()创建的对象
      };
    }
}
xmlhttp.send();

二、报错处理

当返回JSON格式的报错信息时，responseType已经将返回的数据转成了二进制，我们需要将二进制转化成JSON数据才能获取错误提示。

1）responseType为blob

axios({
   url:'/api/image_verifty',
   responseType:'blob'   
}).then(res=>{
   const reader  = new FileReader();  //创建一个FileReader实例
   reader.readAsText(res.data, 'utf-8'); //读取文件,结果用字符串形式表示
   reader.onload=()=>{//读取完成后,**获取reader.result**
       try{
           const msg = JSON.parse(reader.result);  //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
           console.log(msg)   //msg为转换后的JSON数据
       }catch{
           let imageType = res.headers['content-type'];
           let canvas_img = document.querySelector('#canvas_img');
           const blob = new Blob([res.data], { type: imageType })
           const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
           canvas_img.src = imageUrl;
           canvas_img.onload = function(e) {
               window.URL.revokeObjectURL(canvas_img.src);  
           };
       }
   }
})

2）responseType为arraybuffer

axios({
    url:'/api/image_verifty',
    responseType:'arraybuffer'  
}).then(res=>{
   try{
       const utf8decoder = new TextDecoder()
       const u8arr = new Uint8Array(res.data)
       const temp = utf8decoder.decode(u8arr)	// 将二进制数据转为字符串
       const msg = JSON.parse(temp)		//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
       console.log(msg)   //msg为转换后的JSON数据
   }catch{
       let imageType = res.headers['content-type'];
       let canvas_img = document.querySelector('#canvas_img');
       const blob = new Blob([res.data], { type: imageType })
       const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
       canvas_img.src = imageUrl;
       canvas_img.onload = function(e) {
           window.URL.revokeObjectURL(canvas_img.src);
       };
   }
})

三、补充（文件下载）

以上的方法也适用于下载各类文件
接口的响应头信息如下：

axios({
    url:'/export',
    method:'get',
    responseType:'blob'
}).then(res=>{
    const { data, headers } = res;
    /*获取文件名,这里的正则表达式要根据响应头"content-disposition"信息来变化，含义是将headers['content-disposition']的内容替换成第一个括号里的内容(即文件名)并返回。
    	如果响应头：
    		content-disposition:attachment; filename="测试文件名.xls"
    	注意分号与filename间多了空格，filename后还有个双引号
    	所以：
    		const fileName = headers['content-disposition'].replace(/\w+; filename="(.*)"/, '$1') 
    */
    const fileName = headers['content-disposition'].replace(/\w+;filename=(.*)/, '$1') 
    //获取文件流及文件类型
    const blob = new Blob([data], { type: headers['content-type'] })
    let a = document.createElement('a')
    let url = window.URL.createObjectURL(blob)
    a.href = url
    a.download = decodeURI(fileName)
    a.style.display = 'none'
    document.body.appendChild(a)
    a.click()
    a.parentNode.removeChild(a)
    window.URL.revokeObjectURL(url)
})

参考：JavaScript如何转换二进制数据显示成图片，见文末补充介绍。
参考：如何将blob返回值转换为json格式
参考：js 二进制流文件下载（接口返回二进制流）乱码处理
参考：前端使用axios实现下载文件功能的详细过程

补充：

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);

到此这篇关于js 二进制流转图片的文章就介绍到这了,更多相关js 二进制流转图片内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！