Hola, estoy ante un problema que no logro resolver.
Tengo que generar una imágen final de 1200x630 a partir de 2 canvas que no necesariamente van a tener ese tamaño, por ejemplo al ver la aplicación desde un dispositivo móvil.
Esta es la parte de los canvas, voy dibujando fotos y elementos según acciones de los usuarios, esto funciona.
Código HTML:
<div>
<canvas width="1200" height="630" id="canvas-foto">Tu navegador no soporta esta aplicación</canvas>
<canvas width="1200" height="630" id="canvas-marco">Tu navegador no soporta esta aplicación</canvas>
<canvas width="1200" height="630" id="canvas-wrapper">Tu navegador no soporta esta aplicación</canvas>
</div>
<button id="btn_guardar">Guardar</button>
Esta sería la parte del JS encargada de generar la imágen, para el ejemplo simplemente la suelto en pantalla, aunque ya la guardo en el servidor
Código HTML:
var canvas_marcos = document.getElementById("canvas-marco");
var ctx_marcos = canvas_marcos.getContext("2d");
var canvas_foto = document.getElementById("canvas-foto");
var ctx_foto = canvas_foto.getContext("2d");
var canvas_wrapper = document.getElementById("canvas-wrapper");
var ctx_wrapper = canvas_wrapper.getContext("2d");
$('#btn_guardar').click(function(){
ctx_wrapper.drawImage(canvas_foto, 0, 0);
ctx_wrapper.drawImage(canvas_marcos, 0, 0);
var dataURL = canvas_wrapper.toDataURL();
var img = new Image();
img.onload = function(){
document.body.appendChild(img);
}
img.src = dataURL;
});
Ahora tengo que implementar el responsive de esto, pero al reescalar el canvas el tamaño de la imágen final también cambiará, ¿cómo hago para obtener una imágen de 1200x630 a partir de un canvas más chico?
Aclaro que los elementos adentro de los canvas pueden ser reubicados por el usuario a través del drag & drop.
Saludos!