Hola, estoy tratando de dibujar una imagen en el lienzo a continuación es mi código html
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-type" content="image/png"; charset="UTF-8"> <img class="single-image" src="https://www.google.com/imgres?imgurl=http%3A%2F%2Fs3.amazonaws.com%2Fpix.iemoji.com%2Fimages%2Femoji%2Fapple%2Fios-12%2F256%2Fneutral-face.png&imgrefurl=http%3A%2F%2Fwww.iemoji.com%2Fview%2Femoji%2F821%2Fsmileys-people%2Fneutral-face&tbnid=AJSgSdgVIo5bRM&vet=12ahUKEwj7mKHix93zAhW3gv0HHSCjAUQQMygAegUIARCNAQ..i&docid=xAafOcEIRf_eyM&w=256&h=256&q=neutral%20emoji&hl=el&ved=2ahUKEwj7mKHix93zAhW3gv0HHSCjAUQQMygAegUIARCNAQ" /> </head> <body> <canvas width="320" height="320"></canvas> </body> </html>y aquí está mi código js:
function copyImageToCanvas() { var image = document.querySelector("img"); var canvas = document.querySelector("canvas"); var ctx = canvas.getContext("2d"); ctx.drawImage( image, 0, 0 ) } setTimeout(() => { copyImageToCanvas(); }, 300)Cuando cargo la página html en el servidor en vivo, recibo la siguiente advertencia y solo un ícono de imagen como el siguiente: ingrese la descripción de la imagen aquí
Cualquier ayuda sería apreciada. No puedo encontrar una solución para ese problema. ¿La advertencia o cargué la imagen de manera incorrecta?
intente usar el enlace real de la imagen en su lugar. En este caso:
<img class="single-image" src="http://s3.amazonaws.com/pix.iemoji.com/images/emoji/apple/ios-12/256/neutral-face.png" />La forma de averiguarlo es hacer clic con el botón derecho en la imagen y seleccionar "Abrir imagen en una pestaña nueva". Encontrará el enlace real de la imagen en la barra de direcciones de su navegador.
Nota: no sé por qué pones tu <img/> dentro de <head/> , porque no funcionará. Póngalo en la etiqueta <body/> . Si desea colocar su lienzo encima de la imagen, consulte esta respuesta .
En vivo: https://playcode.io/826949