在canvas绘制图片后，无法使用toBlob、toDataURL等方法，出现错误提示(Uncaught DOMException: Failed to execute 'toBlob' on 'HTMLCanvasElement': Tainted canvases may not be exported.)，是因为图片来自不同域的安全策略所导致的，浏览器会阻止您将跨域图片绘制到Canvas上，以防止潜在的安全问题。

解决方法，为图片添加crossOrigin属性。

export default {
	data() {
		return {
            ctx: null,
            canvas: null,
			imgUrl: 'https://www.595blog.com/uploads/2022/06/62a43c26cf2a0.png',
		}
	},
	methods: {
		drawImage() {
			//创建Image对象
			const image = new Image();

			//设置crossOrigin属性
            image.setAttribute('crossOrigin', 'anonymous');

            image.src = this.imgUrl;

            //图像加载完成后绘制到Canvas
            image.onload = () => {
            	this.ctx.drawImage(image, 0, 0, 100, 100);
            }
		},
        handleDblclick() {
            const base64 = this.canvas.toDataURL("image/png");
            console.log(base64);
        }
	},
	mounted() {
        this.canvas = this.$refs.canvas;
        this.ctx = this.canvas.getContext('2d');

		this.drawImage();
	}
}

添加crossOrigin属性后，如果出现了新错误(No 'Access-Control-Allow-Origin' header is present on the requested resource.)，这是因为图片服务器端没有做跨域设置，需要做跨域设置。设置后，接口响应头携带了Access-Control-Allow-Origin，但是依旧无法加载图片，需要查看了请求图片的响应头，是否携带Access-Control-Allow-Origin。如果没有，需要给图片也加上。

以nginx为例

location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
{
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Methods' '*';
    add_header 'Access-Control-Allow-Headers' '*';
    add_header 'Access-Control-Allow-Credentials' 'true';
}