url、base64、blob，三者之间的转化

1. url 转 base64

const 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);
		};
		
		image.setAttribute("crossOrigin", 'Anonymous');
		image.src = url;
		// 图片加载失败的错误处理
		image.onerror = () => {
			reject(new Error('图片流异常'));
		};
	})
}

调用

    let imgUrL = `http://XXX.jpg`
    urlToBase64(imgUrL).then(res => {
      // 转化后的base64图片地址
      console.log('base64', res)
    })

2. blob 转 base64

const blobToBase64 = (blob) => {
	return new Promise((resolve, reject) => {
		const fileReader = new FileReader();
		fileReader.onload = (e) => {
			resolve(e.target.result);
		};
		// readAsDataURL
		fileReader.readAsDataURL(blob.raw);
		fileReader.onerror = () => {
			reject(new Error('文件流异常'));
		};
	});
}

调用

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

url、base64、blob，三者之间的转化