Estoy tratando de cargar una imagen local en el elemento del lienzo, pero arroja un error:
Error al ejecutar 'drawImage' en 'CanvasRenderingContext2D': el valor proporcionado no es del tipo '(CSSImageValue o HTMLCanvasElement o HTMLImageElement o HTMLVideoElement o ImageBitmap o OffscreenCanvas o SVGImageElement o VideoFrame)'.
Funciona bien cuando dibujo o hago cosas con la ventana del lienzo, pero cuando intento importar una imagen usando image = Image(gImage.default) ¿se rompe? Estoy tratando de seguir un tutorial hecho para reaccionar en Next.js, ¿es algo por eso?
Mi código:
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 Pensé que esto era algo relacionado con getStaticProps pero cuando trato de pasar una imagen desde allí, dice que el método Image() no está definido, entonces, ¿hay alguna forma de evitar esto? ¿Y por qué está pasando?
El constructor de imágenes que está tratando de usar no es de next/image . Debe eliminar la import Image from "next/image" de las importaciones.
También debe mover la inicialización de la variable de image dentro de useEffect y establecer la fuente de la imagen en "/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