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

【问题标题】：Display Browser Image within Canvas in React在 React 中的 Canvas 中显示浏览器图像
【发布时间】：2021-11-09 01:33:31
【问题描述】：

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

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;

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

【问题讨论】：

Your code does work。您确定图像的路径正确吗？（请注意，在示例中我给了useEffect 一个空的依赖数组，并在 Canvas 中使用了 width 和 height 属性。
是的，我认为路径名是问题所在。上一级目录中的图片称为“静态”。由于某种原因，'../static/preview.jpg' 不适用于 image.src。我应该将图像放在公用文件夹还是其他东西？

标签： reactjs canvas

【解决方案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} />;

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

【讨论】：