base64转换成图片

对于web来说，base64是很好用的，可以直接用在Image.src=base64str 而且性能也要比图片快一些（毕竟是字符串传输）

但是有时候确实是需要看到图片本身，所以这里介绍一下如何将base64字符串转成真实的Image

首先要把base64str格式化，图片来的base64str字符串可能会带有标头，如下图

如果是png 或者别的类型，会有差别

将标头去掉，只留下base64的内容后，传给window.atob() 转换成 arraybuffer

然后将arraybuffer 转换为 8位长度的 unit8array，然后就可以看到图片了

如有需要可以再转为 Blob()

function base64ToArrayBuffer(urlData: string, type: string) {
    const arr = urlData.split(',');
    const mime = arr[0].match(/:(.*?);/)[1] || type;
    // 去掉url的头，并转化为byte
    const bytes = window.atob(arr[1]);
    // 处理异常,将ascii码小于0的转换为大于0
    const ab = new ArrayBuffer(bytes.length);
    // 生成视图（直接针对内存）：8位无符号整数，长度1个字节
    const ia = new Uint8Array(ab);
    for (let i = 0; i < bytes.length; i+=1) {
        ia[i] = bytes.charCodeAt(i);
    }
    return ia;
}