将请求返回的图片转为Base64形式显示在页面上

情景：
如图该请求返回一张图片，我该如何显示在页面上呢？

代码如下：

transformArrayBufferToBase64 (buffer) {var binary = '';var bytes = new Uint8Array(buffer);for (var len = bytes.byteLength, i = 0; i < len; i++) {binary += String.fromCharCode(bytes[i]);}return window.btoa(binary);}componentDidMount() {// ...this.getSetCodeImg();}getSetCodeImg = () => {timerId = setTimeout(this.getSetCodeImg, 1000 *10 * 60 *5);axios.get('http://120.77.204.211:9091/api/getCodeImg',{responseType: 'arraybuffer'}).then(res => {var img = document.createElement("img");img.src = `data:image/jpeg;base64,${this.transformArrayBufferToBase64(res.data)}`;img.width = 90;codeImgContainner.innerHTML = '';codeImgContainner.appendChild(img);})}handleChangeCodeImg = () => {clearTimeout(timerId);this.getSetCodeImg();}

<div className="section-pushInChannel-code"><div className="section-pushInChannel-codeInputTip"><FormItem label="验证码">{getFieldDecorator('code', {rules: [{required: true, message: '请输入您的验证码'}]}) (<Input placeholder="请输入您的验证码" />)}</FormItem><div className="section-pushInChannel-codeTip"></div></div><div className="section-pushInChannel-codeImg" onClick={this.handleChangeCodeImg}/></div>

实现效果：
页面加载完成时，请求一次接口，转成图片插入到页面中，每5分钟请求一次，刷新验证码。点击图片重新获取验证码。

注意：

请求时，指定请求参数：{responseType: ‘arraybuffer’}，指定返回相应数据的类型，返回的data是包含二进制数据的javaScript ArrayBuffer
请求结果如下：
btoa() 方法用于创建一个 base-64 编码的字符串。

将请求返回的图片转为Base64形式显示在页面上相关推荐

js 点击按钮或者图片，实现图片上传并显示在页面上
点击图片本身,实现图片上传: <div class="card">// 用于接受上传的图片<img src="img.jpg" alt=&qu ...
java返回图片base64_java将图片转为base64返回给前端
本文实例为大家分享了java将图片转为base64返回给前端的具体代码,供大家参考,具体内容如下一.controller端代码 @RequestMapping(value = "/capt ...
java 上传图片转base64_java将图片转为base64返回给前端
本文实例为大家分享了java将图片转为base64返回给前端的具体代码,供大家参考,具体内容如下一.controller端代码 @RequestMapping(value = "/capt ...
php 图片文件转base64编码格式,php如何将图片转为base64编码格式
php将图片转为base64编码格式的方法:首先读取图片流:然后利用[base64_encode]函数进行编码格式转换即可. PHP保存Base64图片base64_decode的问题 PHP对Bas ...
为什么要将图片转为base64格式
图片的 base64 编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址; 1. 提升性能: 网页上的每一个图片,都是需要消耗一个 http 请求下载而来的, 图片的下载始终都要向服 ...
Nodejs 使用 Buffer 将图片转为 base64
一直以为图片转为 base64 很复杂,结果今天看了下 Docusaurus 的 plugin-ideal-image 插件源码,居然只要一行代码就完事了: const toBase64 = (ext ...
Java处理富文本编辑器的图片转为base64编码
一.需求(场景) 后台(内网)通过富文本编辑器编辑的图文信息,需要在移动端(外网)展示,需要将内容中的图片的src的路径替换成base64编码的传递到前台. 二.思路 1.获取内容中的<img& ...
Java将图片转为Base64
Java将图片转为Base64 import net.coobird.thumbnailator.Thumbnails; import org.apache.commons.codec.binary. ...
使用canvas.toDataURL把图片转为base64格式
使用canvas.toDataURL把图片转为base64格式 function getBase64(url) {//通过构造函数来创建的 img 实例,在赋予 src 值后就会立刻下载图片,相比 c ...

将请求返回的图片转为Base64形式显示在页面上

将请求返回的图片转为Base64形式显示在页面上相关推荐

最新文章

热门文章