blob与base64互转

JavaScript 2021-05-02 305

小项目中,遇到图片跨域的问题,现在的解决方式是后端下载图片,转为base64后,传递到前端,img标签支持显示base64,但是看着一大串base64,总觉得难受!思考,将base64转为blob url显示。

转载链接:https://www.cnblogs.com/dcb3688/p/4608062.html

/**
     * base64  to blob二进制
     */
    function dataURItoBlob(dataURI) {
        var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; // mime类型
        var byteString = atob(dataURI.split(',')[1]); //base64 解码
        var arrayBuffer = new ArrayBuffer(byteString.length); //创建缓冲数组
        var intArray = new Uint8Array(arrayBuffer); //创建视图

        for (var i = 0; i < byteString.length; i++) {
            intArray[i] = byteString.charCodeAt(i);
        }
        return new Blob([intArray], {type: mimeString});
    }

    /**
     * 
     * blob二进制 to base64
     **/
    function blobToDataURI(blob, callback) {
        var reader = new FileReader();
        reader.onload = function (e) {
            callback(e.target.result);
        }
        reader.readAsDataURL(blob);
    }

使用上方的转换函数,将base64转为blob后,在使用

// 将blob对象转为blob url
// blob:http://127.0.0.1:8080/e894d0c4-6737-4218-ba3b-02f2e9e55a7b
URL.createObjectURL(blob)

 

标签:JavaScript

文章评论

评论列表

已有0条评论