JS in the browser Base64, URL, blob mutual conversion

base64 The format is generally in data:image/jpeg;base64, A long string beginning with this similar form .

url Usually take the server address or path （ Form like http://xxx.jpg perhaps /static/xxx.jpg） Mainly , There will also be browser local addresses （ Form like blob:http:// such ）.

blob It is generally an object type in the browser ,file Type is also one of them .

How to convert each other ？
base64 To blob：

such as png Format base64 Picture turned into blob type ：

function pngBase64ToBlob(urlData) {
    try {
        var arr = urlData.split(',')
        var mime = arr[0].match(/:(.*?);/)[1] || 'image/png';
        // Get rid of url The head of the , And into byte
        var bytes = window.atob(arr[1]);
        // Handling exceptions , take ascii Code less than 0 The conversion of is greater than 0
        var ab = new ArrayBuffer(bytes.length);
        // Generate views （ Direct to memory ）：8 Bit unsigned integer , length 1 Bytes
        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',
        });
    }
}
Pictures in other formats are similar , So you can write a general picture interface ：

function imageBase64ToBlob(urlData, type='image/jpeg') {
    try {
        var arr = urlData.split(',')
        var mime = arr[0].match(/:(.*?);/)[1] || type;
        // Get rid of url The head of the , And into byte
        var bytes = window.atob(arr[1]);
        // Handling exceptions , take ascii Code less than 0 The conversion of is greater than 0
        var ab = new ArrayBuffer(bytes.length);
        // Generate views （ Direct to memory ）：8 Bit unsigned integer , length 1 Bytes
        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 Transfer to local url：

function blobToUrl(blob_data) {
    return URL.createObjectURL(blob_data)
}
blob turn base64：

function blobToBase64(blob_data, callback) {
    let reader = new FileReader()
    reader.onload = (e) => {
        if (callback) {
            callback(e.target.result)
        }
    }
    reader.readAsDataURL(blob_data)
}
url turn 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();
}
Encapsulating the above interfaces can realize the mutual conversion of the three formats .