在 React 中的 Canvas 中显示浏览器图像

Question

我试图简单地加载本地图像并将其绘制到反应功能组件内的画布元素内的浏览器，但我很挣扎：

import { useEffect, useRef } from 'react';

export default function Canvas({ width, height }) {

    const myCanvas = useRef();

    useEffect(() => {
        const context = myCanvas.current.getContext('2d');
        const image = new Image();
        image.src = '/home/ben/consensys/eth-og/src/static/preview.jpg';
        context.drawImage(image, 0, 0, 100, 100);
    })

    return (
        <canvas
            ref={myCanvas}
            width={width}
            height={height}
        />
    )
}

然后在App.js中：

import Canvas from './Canvas';

function App() {

  return (
    <Web3ReactProvider getLibrary={getLibrary}>
      <div className="App">
        <Canvas height={500} width={500} />
      </div>
  );
}

export default App;

我的浏览器正在显示画布元素，但其上没有图像，只有一个空占位符。有任何想法吗？

Answer 1

基于共享代码，问题在于图像加载。您试图在加载之前绘制图像，这就是画布显示空块的原因......

您可以使用 来解决此问题image.onload，例如：

  const myCanvas = useRef();

  useEffect(() => {
    const context = myCanvas.current.getContext("2d");
    const image = new Image();
    image.src =
      "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Picture_icon_BLACK.svg/1200px-Picture_icon_BLACK.svg.png";
    image.onload = () => {
      context.drawImage(image, 0, 0, 500, 500);
    };
  }, []);

  return <canvas ref={myCanvas} width={500} height={500} />;

这是演示网址（从您的代码复制）