后端直接返回二进制图片、前端src显示 |
您所在的位置：网站首页 › js图片流转换成图片 › 后端直接返回二进制图片、前端src显示 |
后端直接返回二进制图片、前端src显示
|
1、解析一个项目，a标签的src文件地址，你如果直接去request，会发现返回的是一个二进制文件 �PNG =>例如这样的 ajax增加属性： xhrFields: { responseType: “arraybuffer” }, base64转二进制流 function dataURLtoBlob(dataurl) { var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } // return new Blob([u8arr], { // type: mime // }); return u8arr } function getBase64Image(img) { var canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; var ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0, img.width, img.height); var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase(); var dataURL = canvas.toDataURL("image/" + ext); return dataURL; } (() => { let img = new Image(); img.setAttribute('crossOrigin', 'anonymous'); //网络图片地址 img.src = 'http://666.itshare.club/1603509156777'; img.onload = () => { //获得base64 let getBase64Str = getBase64Image(img); //获得二进制流 let getBlobStr = dataURLtoBlob(getBase64Str) } })()使用atob()函数用于解码使用 base-64 编码的字符串 将二进制流转成图片 算了，偷点懒偷点懒 前端上传图片 base64转二进制上传 var dataURItoBlob = function (dataURI) { var byteString = atob(dataURI.split(',')[1]); var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; var ab = new ArrayBuffer(byteString.length); var ia = new Uint8Array(ab); for (var i = 0; i |
【本文地址】
今日新闻 |
推荐新闻 |