无法在 Next.js 中执行 DrawImage

Question

我是 Next.js 的新手。我正在尝试在 html canvas 中加载图像并对其进行一些处理。

当我尝试在 canvas 上绘图时出现此错误

Unhandled Runtime Error
TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLCanvasElement or HTMLImageElement or HTMLVideoElement or ImageBitmap or OffscreenCanvas or SVGImageElement or VideoFrame)'.

这是我的代码

import Image from "next/image";

function tileImage() {
  return <Image src="/tiles.png" alt="tiles" />;
}
           
const draw = (ctx) => {
    for (var c = 0; c < map.cols; c++) {
      for (var r = 0; r < map.rows; r++) {
        var tile = map.getTile(c, r);
        if (tile !== 0) {
          // 0 => empty tile
          ctx.drawImage(
            tileImage, // image
            (tile - 1) * map.tsize, // source x
            0, // source y
            map.tsize, // source width
            map.tsize, // source height
            c * map.tsize, // target x
            r * map.tsize, // target y
            map.tsize, // target width
            map.tsize // target height
          );
        }
      }
    }
  };

  return (
    <div className={styles.container}>
      <main className={styles.main}>
        <Canvas draw={draw} />
      </main>
    </div>
  );
}

任何帮助将不胜感激。提前致谢。

Answer 1

好的，另一个想法：你传递的函数不是 img。试试这个：

const imgRef=useRef();

...
ctx.drawImage(
            imgRef.current, // image
            (tile - 1) * map.tsize, // source x

...
 <div className={styles.container}>
      <main className={styles.main}>
        <Canvas draw={draw} />
        <img src="/tiles.png" alt="tiles" ref={imgRef}/>
      </main>
 </div>
...

无法在 Next.js 中执行 DrawImage

Failed to Execute DrawImage in Next.js

javascript

canvas

next.js