js将图片url转化为base64

1. 将以下代码复制封装于xxx.js文件中，放置在项目文件夹utiles下

   /**
    * 把url转换为 canvas对象
    * @param url 网络图片地址必须服务器设置允许跨域
    * @returns {Promise<any>}
    */
   export default function urlToCanvas (url) {
         
         
   	return new Promise((resolve) => {
         
         
   		var image = new Image();
   		// 先设置图片跨域属性
   		image.crossOrigin = 'Anonymous';
   		/ 再给image赋值src属性，先后顺序不能颠倒
   		image.src = url;
   		image.onload = function () {
         
         
   			var canvas = document.createElement('CANVAS');
   			// 设置canvas宽高等于图片实际宽高
   			canvas.width = image.width
   			canvas.height = image.height
   			canvas.getContext('2d').drawImage(image, 0, 0)
   			let dataURL = canvas.toDataURL("image/jpeg") // toDataUrl可以接收2个参数，参数一：图片类型，参数二： 图片质量0-1（不传默认为0.92）  			
   			resolve(dataURL)	
       }
       image.onerror = () => {
         
         
         resolve({
         
          message: '相片处理失败' })
       }
     })
   }
   

2. 使用：引入xxx.js文件，调用方法

   // 注意引入路径不要出错
   import urlToCanvas from '@/utils/xxx.js'
   
   urlToCanvas(url).then(res => {
         
         
   	// 输出图片base64
   	console.log(res)
   }).catch((err) => {
         
         
   	// 输出图片错误信息
   	console.log(err)
   })
   

3. 若控制台出现以下错误
   
   原因：由于Canvas无法对跨域的图片进行操作，在纯前端利用JS通过图片的url(比如百度的图片)转化为base64，则必须使用canvas，所以必须开启允许跨域，除了当前执行canvas前开启跨域（image.crossOrigin = ‘Anonymous’）外，服务端也必须开启允许跨域。