使用canvas drawImage会在Next.js中引发错误

Question

我试图将本地图像加载到画布元素上，但它抛出了一个错误：

无法在"CanvasRenderingContext2D"上执行"drawImage"：提供的值不是类型"(CSSImageValue或HTMLCanvasElement或HTMLImageElement或HTMLVideoElement或ImageBitmap或OffscreenCnvas或SVGImageElement或VideoFrame(’。

当我用画布窗口绘制或做一些事情时，它工作得很好，但当我尝试使用image = Image(gImage.default)导入图像时，它会中断吗？我正在努力遵循Next.js上为react制作的教程，这是因为它吗？

我的代码：

import React, { useRef, useEffect, useState } from "react";
import Image from "next/image";
const Canvas = (props) => {
const canvasRef = useRef(null)
// load image
const gImage = require("../public/map.png")
const image = Image(gImage.default)
useEffect(() => {
const someTry = () => {
}
const canvas = canvasRef.current
const context = canvas.getContext('2d')
// our first draw
context.fillStyle = "#000000"
context.fillRect(0, 0, context.canvas.width, context.canvas.height)
console.log(image)
someTry()
// const mapImage = document.createElement('img')
// mapImage.src = '../public/map.png'
// context.drawImage(image, 0, 0)
image.onload = () => {
context.drawImage(image, 0, 0)
}
}, [])
return <canvas ref={canvasRef} {...props} width={288} height={480} />
}
export default Canvas

我以为这和getStaticProps有关，但当我试图从那里传递图像时，它说Image()方法没有定义，所以有办法解决这个问题吗？为什么会发生这种事？

Answer 1

您尝试使用的Image构造函数不是来自next/image。您应该从导入中删除import Image from "next/image"。

您还应该在useEffect中移动image变量初始化，并将图像的源设置为"/map.png"。

import React, { useRef, useEffect } from "react";
const Canvas = (props) => {
const canvasRef = useRef(null)
useEffect(() => {
const image = new Image()
image.src = "/map.png"

const canvas = canvasRef.current
const context = canvas.getContext('2d')
context.fillStyle = "#000000"
context.fillRect(0, 0, context.canvas.width, context.canvas.height)

image.onload = () => {
context.drawImage(image, 0, 0)
}
}, [])
return <canvas ref={canvasRef} {...props} width={288} height={480} />
}
export default Canvas