vue页面转图片,js二进制流转图片并显示

　　这篇文章主要介绍了某视频剪辑软件拿到二进制流图片如何转为正常图片并显示，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

目录

　　 二进制流图片转为正常图片并显示解析一滴二进制流图片的展示

二进制流图片转为正常图片并显示

　　第一步

　　axios({

　　方法：“得到”，

　　url，

　　responseType: arraybuffer //最为关键

　　})。然后（函数（响应){

　　那个。src= data:image/JPEG；base64，那个。arraybuffertobase 64(响应。数据)

　　})

　　arrayBufferToBase64(缓冲区){

　　var binary=

　　var bytes=new Uint8Array(缓冲区)

　　var len=bytes.byteLength

　　for(var I=0；我leni ) {

　　二进制=字符串。from charcode(字节[I])

　　}

　　返回window.btoa(二进制)

　　},

　　img :src=src alt=验证码

解析blob 二进制流图片的展示

　　el图像垂直加载= loading style= height:480 px；:src=imgsrc/el-image

　　///api/plan.js文件请求方法

　　导出函数getFlowPhoto(数据){

　　退货请求({

　　网址："/XXX/xxxx/getflow photo "，

　　方法： post ，

　　响应类型：“blob”，

　　数据

　　})

　　}

　　脚本

　　从" @/api/plan.js "导入{ get flow photo }；

　　导出默认值{

　　data() {

　　返回{

　　imgsrc: ，

　　加载：假，

　　}

　　},

　　已安装(){},

　　方法：{

　　fetchData() {

　　this.loading=true

　　变那个=这个

　　getFlowPhoto({id:xxx}).然后((res)={

　　if(res.code==401){

　　这个消息({

　　消息：res.message，

　　类型："错误",

　　});

　　}

　　if(res){

　　const myBlob=新窗口Blob([res]，{type: image/jpeg})

　　const qrUrl=window .URL.createObjectURL(myBlob)

　　this.imgsrc=qrUrl

　　this.loading=false

　　}

　　});

　　},

　　}

　　}

　　/脚本

　　以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。