前端-DataURL的几种处理方式及相互间的转换

一、显示图片

如果想在前端显示一张图片，那么后端传过来的数据格式有三种。

1. 图片链接
   不但一定链接是要文件存放的地址，如 ‘XXX/img.png’，‘aaa/bbb’ 这样的地址，只要返回的是个图片就可以，就可以直接放路径里

   const imgScr = "http://xx.png"
   
   

   

2. 二进制流
   如果返回的是图片的二进制流，那么需要在获取数据的是时候，处理一下数据格式，转成blob对象，再转成DataURL

    const img = document.createElement('img');
    img.src = window.URL.createObjectURL(data);
   

   

3. base64
   如果返回的是base64的数据格式，那么也是直接放在路径里就好了

    const img = document.createElement('img');
    img.src = 'data:image/png;base64,' + data;
   

二、图片格式间的相互转换

但有些时候，我们不仅是要显示图片，还要将其转化为我们所需要的格式，以下介绍一些转化方法

1. 图片转base64
   利用canvas的 toDataURL() 方法

  getBase64Str(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;
  }

2. base64转二进制

base64ToBlobArr(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 u8arr
}

3. 二进制转base64

blobToBase64(data) {
	let img64 = btoa(new Uint8Array(data).reduce((data, byte) => data + String.fromCharCode(byte),''))
	const src = "data:image/svg;base64,"+img64;
	return src;
}

4. blob 转base64

blobToDataURI(blob) {
     var reader = new FileReader();
     reader.onload = function (e) {
         callback(e.target.result);
     }
     reader.readAsDataURL(blob);
 }

5. base64转blob

base64ToBlob(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
    });
}

6. 总结

参考链接：

JS将图片转成base64和二进制流，将二进制流转成base64

前端二进制学习