后端返回各种图片形式在前端的转换及展示 |
您所在的位置：网站首页 › 二进制图片文件怎么做手机 › 后端返回各种图片形式在前端的转换及展示 |
后端返回各种图片形式在前端的转换及展示
|
一、
接口返回的图片显示如下所示：（在控制台看的）返回的是这个图片（二进制） 
可是，在 打印的时候，返回的却是
出现问题的原因的axios 默认返回的是 json 文本形式，二进制图片数据被强制转换成了 json 文本形式。 找到了原因，解决方案就好办了。我们在 axios 里面，responseType 默认返回数据类型是 json，将其改为返回数据类型 blob。下面代码是正常的图片显示，若是接口返回的图片要回显到 van-uploader里面，参考 van-uplaoder保存文件到后端，回显后端接口返回的数据_van-uploader_鲸洛洛的博客-CSDN博客 axios({ method: 'get', url: 'XXXXX', headers: { 'xxx': xxxx, //需要token的借鉴 }, responseType: 'arraybuffer', }) .then(res => { let url=window.URL.createObjectURL(new Blob([res.data], { type: 'image/png' })), //直接把url赋值给img的src }) .catch(err => { reject(err.data) }) 二、url、base64、blob，三者之间转化 1.url 转 base64原理： 利用canvas.toDataURL的API转化成base64 function urlToBase64(url) { return new Promise ((resolve,reject) => { let image = new Image(); image.onload = function() { let canvas = document.createElement('canvas'); canvas.width = this.naturalWidth; canvas.height = this.naturalHeight; // 将图片插入画布并开始绘制 canvas.getContext('2d').drawImage(image, 0, 0); // result let result = canvas.toDataURL('image/png') resolve(result); }; // CORS 策略，会存在跨域问题https://stackoverflow.com/questions/20424279/canvas-todataurl-securityerror image.setAttribute("crossOrigin",'Anonymous'); image.src = url; // 图片加载失败的错误处理 image.onerror = () => { reject(new Error('urlToBase64 error')); }; }调用 let imgUrL = `http://XXX.jpg` urlToBase64(imgUrL).then(res => { // 转化后的base64图片地址 console.log('base64', res) }) 2.base64 转 blob原理：利用URL.createObjectURL为blob对象创建临时的URL function base64ToBlob ({b64data = '', contentType = '', sliceSize = 512} = {}) { return new Promise((resolve, reject) => { // 使用 atob() 方法将数据解码 let byteCharacters = atob(b64data); let byteArrays = []; for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) { let slice = byteCharacters.slice(offset, offset + sliceSize); let byteNumbers = []; for (let i = 0; i < slice.length; i++) { byteNumbers.push(slice.charCodeAt(i)); } // 8 位无符号整数值的类型化数组。内容将初始化为 0。 // 如果无法分配请求数目的字节，则将引发异常。 byteArrays.push(new Uint8Array(byteNumbers)); } let result = new Blob(byteArrays, { type: contentType }) result = Object.assign(result,{ // 这里一定要处理一下 URL.createObjectURL preview: URL.createObjectURL(result), name: `XXX.png` }); resolve(result) }) }调用 let base64 = base64.split(',')[1] base64ToBlob({b64data: base64, contentType: 'image/png'}).then(res => { // 转后后的blob对象 console.log('blob', res) }) 3.blob 转 base64原理：利用fileReader的readAsDataURL，将blob转为base64 blobToBase64(blob) { return new Promise((resolve, reject) => { const fileReader = new FileReader(); fileReader.onload = (e) => { resolve(e.target.result); }; // readAsDataURL fileReader.readAsDataURL(blob); fileReader.onerror = () => { reject(new Error('blobToBase64 error')); }; }); }调用 blobToBase64(blob).then(res => { // 转化后的base64 console.log('base64', res) }) 三、三种显示方式，哪种更优雅呢？url: 一般来说，图片的显示还是建议使用url的方式比较好。如果后端传过来的字段是图片路径的话。 base64：如果图片较大，图片的色彩层次比较丰富，则不适合使用这种方式，因为其Base64编码后的字符串非常大，会明显增大HTML页面，影响加载速度。 如果图片像loading或者表格线这样的，大小极小，但又占据了一次HTTP请求，而很多地方都会使用。则非常适用“base64:URL图片”技术进行优化了！。 blob: 当后端返回特定的图片二进制流的时候，就像我第一part里的情景再现说的，前端用blob容器接收。图片用blob展示会比较好。
|
【本文地址】
今日新闻 |
推荐新闻 |