Tengo un proyecto que se ha escrito sin un marco y funciona bien. Las fotos se muestran en una página. Al hacer clic en uno, se abre un modal y la imagen se muestra en un lienzo en el modal.
Este es el javascript utilizado para abrir el modal imageModal y dibujar la foto en el lienzo llamado photoImage , siendo e la imagen en la que se ha hecho clic.
var canvas = document.getElementById("photoImage"); var canvasCtx = canvas.getContext("2d"); function viewPhoto(e) { $("#imageModal").modal("show"); var image = new Image(); image.src = e.src; canvas.width = image.width; // Width does not get set canvas.height = image.height; // Height does not get set canvasCtx.drawImage(image, 0, 0); // Photo does not get drawn }Ahora he usado exactamente el mismo código en un proyecto de Laravel, pero no dibuja la imagen en el lienzo. He comprobado las propiedades del lienzo en ambos proyectos y son iguales.
Por ejemplo, el lienzo está tomando correctamente la propiedad de altura en ambos proyectos, pero no cambia el tamaño del lienzo en el proyecto de Laravel.
¿Cuál podría ser la causa del problema?
var canvas = document.getElementById("photoImage")[0]; //it return an array of object var canvasCtx = canvas.getContext("2d"); canvasCtx.drawImage(image, 6, 6); // Photo does not get drawn también puedes usar typeo canvas.getContext('2d').drawImage(img, 6, 6)