React应用中Canvas无法绘制图片的技术求助

我之前也遇到过一模一样的情况——图片明明加载完成了，但Canvas就是没显示，查了半天发现核心问题大多出在Canvas的尺寸设置上！结合你的代码，给你几个具体的排查和修复步骤：

1. 区分Canvas的「实际像素尺寸」和「CSS显示尺寸」 #

Canvas有两个关键尺寸：

• 标签上的width/height属性：这是Canvas的实际绘制像素画布大小，默认是300x150
• CSS的width/height：这是Canvas在页面上的显示尺寸，只是对画布进行缩放

你的代码里没有设置Canvas的width/height属性，哪怕CSS设了100%，实际绘制区域还是默认的300x150。如果你的图片比这个尺寸大，就会超出可视范围，看起来像是没绘制。

修复方式：动态设置Canvas的实际尺寸 #

在useEffect里，根据容器的显示尺寸来设置Canvas的像素尺寸：

useEffect(() => {
  const canvas = canvasRef.current;
  const context = canvas.getContext('2d');
  
  // 获取Canvas在页面上的实际显示区域
  const containerRect = canvas.getBoundingClientRect();
  // 设置Canvas的像素尺寸和显示区域一致
  canvas.width = containerRect.width;
  canvas.height = containerRect.height;

  let bed = new Image();
  bed.src = imageBed;
  
  bed.onload = () => {
    console.log('图片加载完成，开始绘制');
    // 如果你想让图片适配Canvas尺寸，就加上宽高参数
    context.drawImage(bed, 0, 0, canvas.width, canvas.height);
    // 要是想按图片原尺寸绘制，就用：context.drawImage(bed, 0, 0);
  };
}, []);

2. 确保Canvas没有被其他元素遮挡 #

检查你的页面结构，看看是否有其他DOM元素（比如父容器的子元素、绝对定位的组件）覆盖在了Canvas上面。可以给Canvas临时加个边框style={{border: '1px solid red'}}，确认它的显示范围和位置是否正确。

3. 验证绘制参数的正确性 #

如果你的图片尺寸远小于Canvas默认的300x150，drawImage(bed, 0, 0)是会在左上角绘制的，但可能因为太小看不出来。可以在onload里打印图片的宽高：

bed.onload = () => {
  console.log('图片宽高:', bed.width, bed.height);
  context.drawImage(bed, 0, 0);
};

要是图片太小，你可以手动指定绘制的宽高：context.drawImage(bed, 0, 0, 200, 200)。

修改后的完整代码示例 #

import React, { useRef, useEffect } from "react";
import image from '../assets/tesis/1_cuarto.JPG';
import imageBed from '../assets/tesis/1_cama.PNG';

export default function Canvas(props) {
  const canvasRef = useRef(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    const context = canvas.getContext('2d');
    
    // 设置Canvas实际像素尺寸匹配显示区域
    const rect = canvas.getBoundingClientRect();
    canvas.width = rect.width;
    canvas.height = rect.height;

    let bed = new Image();
    bed.src = imageBed;
    
    bed.onload = () => {
      console.log('图片加载完成');
      // 适配Canvas尺寸绘制图片
      context.drawImage(bed, 0, 0, canvas.width, canvas.height);
    };
  }, []);

  return (
    <canvas
      ref={canvasRef}
      style={{
        height: '100%',
        width:'100%',
        position: 'absolute',
        backgroundImage: `url(${image})`,
        backgroundPosition: 'center',
        backgroundRepeat: 'no-repeat',
        backgroundSize:'cover'
      }}
    />
  );
}

按这个方法调整后，应该就能看到Canvas上的图片了！

内容的提问来源于stack exchange，提问作者Sebastián Ardila