浏览器跨域图片 提示 BackgroundImgae.tsx:84 Uncaught DOMException: Failed to execute ‘toDataURL‘ on ‘HTMLCanva

BackgroundImgae.tsx:84 Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

未捕获的 DOMException: 未能在‘ HTMLCanvasElement’上执行‘ toDataURL’: 受污染的画布可能无法导出。
 

错误原因：

是因为我们使用外来资源的图片地址，导致了跨越问题；

这个错误通常是由于浏览器跨域图片问题导致的。在使用toDataURL()方法导出带有来自其他域的图像的canvas时，会导致canvas被标记为“污染”，从而禁止导出。

解决方案：

1. 确保图片与当前页面处于同一个域，或者设置合适的CORS头使得图片可被跨域请求。
2. 使用crossOrigin属性在加载图片时明确声明图片允许跨域共享，例如：img.crossOrigin = "anonymous";
3. 如果无法解决跨域问题，可以考虑服务端代理图片或者在服务端进行转换后提供给前端。

代码：

图片地址：

  <img
                onClick={handleClickBg}
                referrerPolicy="no-referrer"
                // src='https://img1.wallspic.com/previews/5/2/6/7/7/177625/177625-qi_fen-sheng_tai_qu-zi_ran_jing_guan-azure-zi_ran_huan_jing-500x.jpg'
                src="https://static.canva.cn/web/images/60e13142604d9410c31e118ca9ecba71.png" alt=""
            />

 // 点击更改背景色事件
    const handleClickBg = (e) => {
        // 调用更改背景色的方法
        changaCan()
        // 创建canvas
        const canvas = document.createElement("canvas");
        // 创建img
        const img = new Image();
        // 赋值路径
        img.src = e.target.src
        // 解决跨域
        img.referrerPolicy = "no-referrer"
        img.crossOrigin = "anonymous";
        // 图片加载完成事件
        img.onload = () => {
            // 创建画笔
            const ctx = canvas.getContext("2d")
            // 设置。宽高
            canvas.width = img.width
            canvas.height = img.height
            // 等比例缩放 实现图片适配
            ctx?.scale(canvas.width / img.width, canvas.height / img.height)
            // 画图
            ctx?.drawImage(img, 0, 0)
            // 将canvas转换成base64格式
            const url = canvas.toDataURL()
            console.log(78987, url);
            // 设置画布背景，并刷新画布
            fabric.Image.fromURL(
                url,
                (img) => {
                    // 设置背景图
                    canvasEditor.canvas.setBackgroundImage(
                        img,
                        canvasEditor.canvas.renderAll.bind(canvasEditor.canvas), {
                        scaleX: Number(localStorage.getItem("width")) / img.width, // 计算出图片要拉伸的宽度
                        scaleY: Number(localStorage.getItem("height")) / img.height // 计算出图片要拉伸的高度
                    }
                    )
                }
            )
        }


        // canvasEditor.canvas.renderAll();
    }

效果图：

可以看到图片地址变成了base64位，图片也可以正确回显了

以上步骤便可解决图片外来资源跨域问题！！！