Quería tomar una foto de una foto que tengo en mi página web usando un lienzo para obtener una URL local. Obviamente, esto es redundante porque ya tengo la URL de la foto, pero sería útil en otros contextos (como videos). Cuando ejecuto este código, aparece un cuadro blanco que no es la imagen que uso para fines de prueba. ¿Dónde me estoy equivocando aquí?
HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="main.js" defer></script> </head> <style> img{ height: 500px; width: 500px; } </style> <body> <img id="test" src="img_url"> <button onclick="takePhoto()">Click Me</button> </body> </html>JS:
var width=200 var height=300 function takePhoto(){ var test = document.getElementById("test") var canvas = document.createElement("canvas") document.body.appendChild(canvas) var cxt = canvas.getContext('2d'); canvas.width = width; canvas.height = height; cxt.drawImage(test, width, height); var data = canvas.toDataURL('image/png'); console.log(data) }La versión de 3 parámetros de drawImage() es
drawImage(source, x, y); Configuró los parámetros x e y al ancho y alto del lienzo, lo que significa que el navegador dibujará la imagen desde la esquina inferior derecha del lienzo, lo que obviamente no hace mucho.
Probablemente querías la versión de 5 parámetros
drawImage(source, x, y, resizeWidth, resizeHeight); Donde establecerías x e y en 0 .