图片类型转换，url，File，Base64，Blob

一，图片url转化为文件

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()
    })
}

参数为图片url和要生成文件的名字。

二，图片文件转化base64

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

参数传入图片文件和一个函数。

使用，imageBase就是生成的图片base64。

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

三，base64转化图片文件

传入图片的base64和要生成的文件名。

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
    });
}

四，blob:http:xxxxxxx转化base64

element组件的图片上传后就是这个样子的。每次生成的路径都不一样。只能在本地访问。

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)
        }
    })
}

 使用

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

五，base64转化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 });
}

输入base64格式

六，Blob转化base64

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

使用

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