js base64转图片

js

在与后台交互当中，难免会遇到后台返回给的图片数据是base64位的，比如生成二维码。然后就需要我们把base64位转为图片再上传，再把拿到的图片地址发送到服务端，让服务端保存到数据库。可能你会说这些逻辑不是应该服务端处理的吗？可是在真实工作当中难免遇到各种情况。下面就来说下如何把base64转为图片文件

一、在html标签中的引用

1
<img src="data:image/png;base64,图片64位字符">

如有不确定可以找个在线图片转base64位的工具看下

二、用js将base64转为图片文件

1
2
3
4
5
6
7
8
9
10
11
12
13
let file = data.qrcode //获取base64位字符串
let type = "image/png"
let img = base64ToBlob(file,type)
img.name = new Date().getTime()
function base64ToBlob(urlData, type){
    let bytes = window.atob(urlData);    // 处理异常,将ascii码小于0的转换为大于0
    let ab = new ArrayBuffer(bytes.length) //生成视图（直接针对内存）：8位无符号整数，长度1个字节    
    let ia = new Uint8Array(ab);    
    for (let i = 0; i < bytes.length; i++) {
    ia[i] = bytes.charCodeAt(i);    
    }    
    return new Blob([ab], {type: type});
}

在这里需要说明下，上面是获取到的base64位是我们服务端给处理过的，已经把头部的data:image/png;base64,这些给截取调了，在真实使用时要根据实际情况操作.

附上参考地址：参考资料地址

-- EOF --

本文链接：http://yoursite.com/2018/10/09/2018/js base64 转图片/

发表于2018-10-09 00:00:00，并被添加「 js 」标签，最后修改于2019-02-12 20:37:10