画像タイプ変換、URL、ファイル、Base64、Blob

1.画像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)
})

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

4、blob:http:xxxxxxx は Base64 を変換します

アップロード後の要素コンポーネントの画像は次のようになります。生成されるパスは毎回異なります。ローカルでのみアクセスできます。

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

5、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形式を入力してください

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