Image type conversion, url, File, Base64, Blob

1. Convert image url to file

function urlToFile(url, imageName) {
    return new Promise((resolve, reject) => {
        var blob = null
        var xhr = new XMLHttpRequest()
        xhr.open('GET', url)
        xhr.setRequestHeader('Accept', 'image/png')
        xhr.responseType = 'blob'
        xhr.onload = () => {
            blob = xhr.response
            let imgFile = new File([blob], imageName, { type: 'image/png' })
            resolve(imgFile)
        }
        xhr.onerror = (e) => {
            reject(e)
        }
        xhr.send()
    })
}

The parameters are the image url and the name of the file to be generated.

Second, the image file is converted to base64

function fileToBase64(img, callback) {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result));
    reader.readAsDataURL(img);
}

The parameters are passed in the image file and a function.

Use, imageBase is the generated image base64.

fileToBase64(res, imageBase => {
    console.log('base64', imageBase)
})

Three, base64 conversion image file

Pass in the base64 of the image and the file name to be generated.

function base64toFile(dataurl, filename) {
    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 File([u8arr], filename, {
        type: mime
    });
}

Four, blob:http:xxxxxxx converts base64

This is what the image of the element component looks like after uploading. The generated path is different every time. Can only be accessed locally.

function blobToBase64(blob){
    return new Promise((resolve) => {
        const image = new Image() // 新建一个img标签（还没嵌入DOM节点)
        image.src = blob;
        image.onload = () => {
            const canvas = document.createElement('canvas')
            canvas.width = image.width
            canvas.height = image.height
            const context = canvas.getContext('2d')
            context.drawImage(image, 0, 0, image.width, image.height);
            let imgUrl = canvas.toDataURL() //图片的base64地址
            // console.log(imgUrl);
            resolve(imgUrl)
        }
    })
}

 use

blobToBase64(blobUrl).then((result) => {
     console.log(result);
})

Five, base64 conversion Blob

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);
    }
    return new Blob([u8arr], { type: mime });
}

Enter base64 format

Six, Blob conversion base64

blobToBase64(blob, callback){
    const fileReader = new FileReader();
    fileReader.onload = (e) => {
        callback(e.target.result);
    };
    fileReader.readAsDataURL(blob);
}

use

blobFileToBase64(blob,(result)=>{
    console.log(result);
})