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

一、显示图片

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

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

   const imgScr = "http://xx.png"
   <img src={imgSrc} />
   

   

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. 总结

<div id="parent">
    <img id="child" src ="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" onclick="test()" />
 </div>
<script>

    function getImg (src) {
        const img = document.createElement('img');
        const parent = document.getElementById('parent');
        img.src = src;
        parent.appendChild(img);
    }

    function getBase64Str(img) {
        var canvas = document.createElement("canvas");
        img.setAttribute("crossOrigin", 'Anonymous')
        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;
      }

    function 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
    }

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

    function 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);
        }
        const BlobObj = new Blob([u8arr], {
           type: mime
        });
        return BlobObj;
    }
    function blobToDataURL(data) {
        const src = window.URL.createObjectURL(data);
        return src;
    }  
   function blobToDataURIFn(blob, callback) {
         var reader = new FileReader();
         reader.onload = function (e) {
             callback(e.target.result);
         }
         reader.readAsDataURL(blob);
     }
    function test() {
        const img = document.getElementById('child');
        let dataUrl = '';
        // 图片转base64转图片
        const base64Str = getBase64Str(img);
        dataUrl = base64Str;
        getImg(dataUrl);

        // base64转二进制,二进制转base64转图片
        const blobObj = base64ToBlobArr(base64Str);
        dataUrl = blobToBase64(blobObj);
        getImg(dataUrl);

        //base64转Blob转图片
        let getBlobObj = base64ToBlob(base64Str);
        dataUrl = blobToDataURL(getBlobObj);
        console.log(imgSrc2);
        getImg(dataUrl);
		
		// Blob转图片
        blobToDataURIFn(getBlobObj, getImg);
    }
</script>

参考链接：

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

前端二进制学习