js base64、url和blob之间相互转换的三种方式

url转换为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'));
            };
        })
    }

调用：

 urlToBase64(url).then(res=> {
      // 转化后的base64图片地址
 	  console.log('base64', res)
});

blob 转 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'));
    };
  });
}

调用：

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

base64 转 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转 File

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