将以下代码复制封装于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: '相片处理失败' })
    }
  })
}

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

// 注意引入路径不要出错
import urlToCanvas from '@/utils/xxx.js'

urlToCanvas(url).then(res => {
	// 输出图片base64
	console.log(res)
}).catch((err) => {
	// 输出图片错误信息
	console.log(err)
})

若控制台出现以下错误

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