快捷導(dǎo)航

js中base64、url和blob之間相互轉(zhuǎn)換的3種方式(詳細(xì)代碼)

更新時間：2023年10月10日 08:31:13 作者：世界太過浮夸

這篇文章主要給大家介紹了關(guān)于js中base64、url和blob之間相互轉(zhuǎn)換的3種方式,Blob和File是用來表示二進(jìn)制數(shù)據(jù)的,而Base64則是一種編碼方式,用來把二進(jìn)制數(shù)據(jù)編碼成可讀的字符串,需要的朋友可以參考下

url轉(zhuǎn)換為base64

 function urlToBase64(url) {
        return new Promise((resolve, reject) => {
            let image = new Image();
            image.onload = function () {
                let canvas = document.createElement('canvas');
                canvas.width = this.naturalWidth;
                canvas.height = this.naturalHeight;
                // 將圖片插入畫布并開始繪制
                canvas.getContext('2d').drawImage(image, 0, 0);
                // result
                let result = canvas.toDataURL('image/png')
                resolve(result);
            };
            // CORS 策略，會存在跨域問題https://stackoverflow.com/questions/20424279/canvas-todataurl-securityerror
            image.setAttribute("crossOrigin", 'Anonymous');
            image.src = url;
            // 圖片加載失敗的錯誤處理
            image.onerror = () => {
                reject(new Error('urlToBase64 error'));
            };
        })
    }

調(diào)用：

 urlToBase64(url).then(res=> {
      // 轉(zhuǎn)化后的base64圖片地址
 	  console.log('base64', res)
});

blob 轉(zhuǎn) url

function blobToBase64(blob) {
  return new Promise((resolve, reject) => {
    const fileReader = new FileReader();
    fileReader.onload = (e) => {
      resolve(e.target.result);
    };
    // readAsDataURL
    fileReader.readAsDataURL(blob);
    fileReader.onerror = () => {
      reject(new Error('blobToBase64 error'));
    };
  });
}

調(diào)用：

blobToBase64(blob).then(res => {
  // 轉(zhuǎn)化后的base64
  console.log('base64', res)
})

base64 轉(zhuǎn) Blob

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

blob轉(zhuǎn) File

 function blobToFile(blob, name) {
        return new File([blob], name + '.png', { type: blob.type });
    }

總結(jié)

到此這篇關(guān)于js中base64、url和blob之間相互轉(zhuǎn)換的3種方式的文章就介紹到這了,更多相關(guān)js base64、url和blob相互轉(zhuǎn)換內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: