HTML canvas 未绘制图像

Question

我有一个 React 应用程序，但是当我尝试加载图像时没有在 canvas 上绘制它。这是代码：

 import React , {useRef, useEffect, useState} 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);

  //const [bed, setBed] = useState(new Image());

  useEffect(() => {


    const canvas = canvasRef.current
    const context = canvas.getContext('2d');
    let bed = new Image();
    bed.src = imageBed;
    //Our first draw
    //context.fillRect(0, 0, context.canvas.width, context.canvas.height)
    bed.onload = () => {
      console.log(bed)
      context.drawImage(bed, 0, 0);
    };


  }, []);

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

当我检查控制台时，路径将我指向图像并加载，但 canvas 没有绘制它。

这是控制台

Answer 1

它似乎在普通 HTML 中工作正常，所以可能是 ref 或图像目录有问题。

const canvas = document.getElementById("ImgCanvas");
const ctx = canvas.getContext('2d');
let bed = new Image();
bed.src = 'https://images.unsplash.com/photo-1615874959474-d609969a20ed?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=580&q=80';
bed.onload = () => {
ctx.drawImage(bed, 0, 0);
};

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<canvas id="ImgCanvas" style="border: 1px solid black;" width="1000px" height="600px"></canvas>
</body>
</html>

Answer 2

你的图片左上角有很多透明度。

根据 w3 spec，canvas 默认为 300 x 150，因此它可能得到 cropped/clipped。
此外，您不能使用 style/CSS 更改 <canvas> 的尺寸，因为这只会拉伸图像而不会增加可绘制像素的数量.您必须明确设置 width 和 height 属性。

直接使用 HTML 中的属性执行此操作：
```
<canvas width="600" height="600">
```
或者在 JS 中：
```
canvas.width = 600;
canvas.height = 600;
```
有关 JS 中更动态、window-size 相关的解决方案，请参阅此答案：

HTML canvas 未绘制图像

HTML canvas not drawing image

html

html5-canvas

reactjs