HTML - [CONSULTA] Generar imágen grande a partir de canvas chico

   
Vista:

[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.

1
2
3
4
5
6
7
<div>
    <canvas width="1200" height="630" id="canvas-foto">Tu navegador no soporta esta aplicaci&oacute;n</canvas>
    <canvas width="1200" height="630" id="canvas-marco">Tu navegador no soporta esta aplicaci&oacute;n</canvas>
    <canvas width="1200" height="630" id="canvas-wrapper">Tu navegador no soporta esta aplicaci&oacute;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
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder