React中渲染PNG到HTML Canvas时出现画布污染报错如何解决？

Tainted canvases may not be exported 是Canvas同源安全策略触发的标准报错：只要画布上绘制了未获得CORS跨域许可的跨域资源，画布会被标记为「污染」状态，所有读取画布内容的API（包括toBlob()、toDataURL()、getImageData()）都会直接抛出这个错误。

你之前做的两个尝试都没命中核心问题：

• 项目里配置的images.domains是Next.js框架自带图片优化组件的规则，只对<Image />（next/image）组件生效，和你用原生new Image()创建的图片对象、Canvas跨域校验完全无关
• 把绘制逻辑放到onload回调里，只解决了「图片没加载完就绘制导致画出来空白」的时序问题，根本没处理跨域许可的问题，自然解决不了报错。

第一步：修正前端图片加载逻辑 #

原生Image对象加载跨域图片用于Canvas时，必须显式设置crossOrigin属性告诉浏览器按CORS规则发起请求，同时要把画布导出逻辑挪到图片加载、绘制完成之后执行，避免时序问题。

修正后的完整组件代码：

import React, { useEffect, useRef } from 'react'

const Canvas = (props) => {
    const canvasRef = useRef(null)

    useEffect(() => {
        const canvas = canvasRef.current
        const ctx = canvas.getContext('2d')

        // 绘制原有圆形
        ctx.fillStyle = '#000000'
        ctx.beginPath()
        ctx.arc(50, 100, 20, 0, 2 * Math.PI)
        ctx.fill()

        const newImage = new Image()
        // 关键配置：声明匿名跨域请求
        newImage.crossOrigin = 'anonymous'
        newImage.src = 'https://fjolt.com/images/misc/202203281.png'

        newImage.onload = () => {
            ctx.drawImage(newImage, 0, 0, 250, 208)
            // 等图片绘制完成再导出画布
            canvas.toBlob(
                (blob) => {
                    console.log(blob)
                },
                'image/jpeg',
                0.95
            )
        }

        newImage.onerror = () => {
            console.error('图片跨域加载失败')
        }
    }, [])

    return <canvas ref={canvasRef} {...props} />
}

export default Canvas

第二步：确认目标图片服务的CORS配置 #

如果改完上面的代码还是报同样的错，说明fjolt.com的图片资源响应头没有返回合法的CORS许可（即没有返回Access-Control-Allow-Origin字段允许你当前站点访问），这种情况前端没有任何黑科技可以绕过浏览器安全策略，只能选下面两种方案解决：

• 把远程图片下载到自己项目的静态资源目录，或者上传到你自己配置了CORS规则的对象存储中，用可控的资源地址加载
• 在自己的服务端写一个简单的图片代理接口，由后端请求远程图片，再给响应加上合法的CORS头返回给前端，前端请求自己的代理接口加载图片即可

注意：不要尝试修改referrer、关闭浏览器安全策略这类野路子，这些方法要么无效，要么只在本地开发环境生效，生产环境完全不可用。

内容的提问来源于stack exchange，提问作者János