base64转二进制码流问题

base64转二进制码流问题记录

在前端项目中，经常会遇到前端使用html2canvas将界面转换成图片，同时可能会将截取的图片传送到服务端进行保存，此时会有一个问题存在：

html2canvas截取到的图片为base64编码，文件长度非常大，在传输给服务端进行保存时，会存在传输上的延迟，所以需要转换成二进制码流进行传输

具体实现如下：

    let formData = new FormData();                                  
    let blobData = this.convertBase64UrlToBlob(dataUrl2);           //将base64转换成二进制blol流数据
    formData.append('file', blobData);                                      //将二进制流放入formData中

    

    /**
    * 将以base64的图片url数据转换为Blob
    * @param urlData
    */
    convertBase64UrlToBlob： function(urlData) {
        var arr = urlData.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});
    }

用这种方法就可以实现将base64转换成二进制流，然后调用服务端接口将图片传送到服务端进行图片可访问链接的生成