Estoy tratando de crear una miniatura más pequeña de una imagen en un lienzo. El tamaño de la miniatura que me gustaría es 200 x 200 Según la documentación, debería ser tan fácil como dibujar Imagen (img, 0, 0, 200, 200) pero obtengo los mismos resultados aquí está mi código:
_canvas = document.createElement('canvas'), ctx = _canvas.getContext("2d"), img = new Image(); img.onload = function() { ctx.drawImage(this, 0, 0, 1200, 600); var dataURL = _canvas.toDataURL(); // The above creates the first image //Then while I'm still in the load method I attempt to save another size: ctx.drawImage(this,0,0,300,300); var dataThumbURL = _canvas.toDataURL();}
Guardo dataURL y dataThumbURL en el servidor y ambas imágenes tienen el mismo tamaño. Mi suposición es que ctx.drawImage podría repetirse con solo un tamaño diferente. ¿Alguna idea de cómo puedo lograr esto?
Los parámetros de ancho y alto del método drawImage() no alteran las dimensiones del lienzo en el que dibuja. Entonces, si su imagen de origen es más grande que el lienzo, simplemente se recortará.
Para tener instantáneas de diferentes tamaños, debe cambiar las dimensiones del lienzo al tamaño deseado antes de llamar a drawImage().
Aquí hay un ejemplo:
let image = new Image(); let _canvas = document.createElement('canvas'); let ctx = _canvas.getContext("2d"); image.crossOrigin = ""; image.onload = function() { let img, dataURL; _canvas.width = 200; _canvas.height = 150; ctx.drawImage(this, 0, 0, _canvas.width, _canvas.height); dataURL = _canvas.toDataURL(); img = new Image(); document.body.appendChild(img); img.src = dataURL; _canvas.width = 40; _canvas.height = 30; ctx.drawImage(this, 0, 0, _canvas.width, _canvas.height); dataURL = _canvas.toDataURL(); img = new Image(); document.body.appendChild(img); img.src = dataURL; } image.src = "https://api.codetabs.com/v1/proxy?quest=https://picsum.photos/id/237/200/300";