React+Next.js中Canvas无法加载图片问题求助

以下是针对你遇到的Canvas加载图片无报错但不显示问题的排查方向和修复方案：

1. 验证Canvas实际渲染尺寸 #

HTML标签上的width和height是Canvas的绘制分辨率，如果父容器的CSS样式对Canvas设置了不同的宽高，可能导致图片被拉伸/压缩到不可见。可以先给Canvas加个边框验证：

canvas {
  border: 1px solid red;
}

如果边框显示但图片不出现，检查父容器的CSS是否覆盖了Canvas的尺寸，确保Canvas的绘制分辨率和显示尺寸一致。

2. 给外部图片添加跨域属性 #

加载外部URL图片时，部分服务器会限制跨域访问，即使控制台没报错，也可能导致图片无法绘制。给Image实例添加crossOrigin属性：

const image = new Image();
image.crossOrigin = 'anonymous';
image.src = 'https://i.imgur.com/CGiZRrB.png';

3. 本地图片的正确加载方式 #

• src/assets 目录：需要通过ES模块导入，不能直接写路径：

// 先导入图片
import canvasImage from '../assets/your-image.png';

// 然后赋值
image.src = canvasImage;

• public 目录：直接使用根相对路径，不需要导入：

image.src = '/your-image.png'; // public文件夹下的图片

4. 添加图片加载错误监听 #

虽然控制台没报错，但可以添加onerror事件排查隐藏问题：

image.onerror = (err) => {
  console.error('图片加载失败:', err);
};

5. 确保drawImage参数正确 #

可以显式设置Canvas的尺寸和图片一致，或者调整绘制位置：

image.onload = () => {
  // 让Canvas和图片尺寸一致
  canvas.width = image.width;
  canvas.height = image.height;
  context.drawImage(image, 0, 0, image.width, image.height);
};

内容的提问来源于stack exchange，提问作者Conscious Nova