公众号：程序员波波

在平时开发的时候，我们在处理文件，尤其是图片的时候，经常会跟base64、url、blob(file)这三种形式的内容打交道。

base64格式一般都是以data:image/jpeg;base64,这种类似形式打头的一串很长的字符串。

url一般以服务器地址或者路径（形如http://xxx.jpg或者/static/xxx.jpg）为主，也会有浏览器本地地址（形如blob:http://这种）。

blob一般是浏览器中的一种对象类型，file类型也是其一种。

 

如何互相进行转换？

base64到blob：

比如png格式的base64图片转成blob类型：

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

        return new Blob([ab], {
            type: mime
        });
    }
    catch (e) {
        var ab = new ArrayBuffer(0);
        return new Blob([ab], {
            type: 'image/png',
        });
    }
}

其他格式的图片类似，于是可以写一个通用的图片接口：

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

        return new Blob([ab], {
            type: mime
        });
    }
    catch (e) {
        var ab = new ArrayBuffer(0);
        return new Blob([ab], {
            type: type,
        });
    }
}

blob转本地url：

function blobToUrl(blob_data) {
    return URL.createObjectURL(blob_data)
}

blob转base64：

function blobToBase64(blob_data, callback) {
    let reader = new FileReader()
    reader.onload = (e) => {
        if (callback) {
            callback(e.target.result)
        }
    }
    reader.readAsDataURL(blob_data)
}

url转blob：

function urlToBlob(the_url, callback) {
    let xhr = new XMLHttpRequest();
    xhr.open("get", the_url, true);
    xhr.responseType = "blob";
    xhr.onload = function() {
        if (this.status == 200) {
            if (callback) {
                callback(this.response);
            }
        }
    };
    xhr.send();
}

有了以上接口就可以三种格式互相转换了，不过url转blob和blob转base64是异步的操作，此外url还分服务器端url和浏览器本地url，需要自己使用时区分清楚。