[CONSULTA] Generar imágen grande a partir de canvas chico
Publicado por César (1 intervención) el 01/12/2015 10:33:10
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.
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
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!
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.
1
2
3
4
5
6
7
<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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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!
Valora esta pregunta
0