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

Question

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

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;

我的浏览器正在显示 canvas 元素，但上面没有图像，只有一个空的占位符。有什么想法吗？

Answer 1

根据共享代码，问题出在图像加载上，您尝试在图像加载前绘制图像，这样canvas 将显示空块..

您可以通过添加 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} />;

这是 demo url（从您的代码中复制）

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

Display Browser Image within Canvas in React

canvas

reactjs