unir canvas y div
Publicado por pedro (71 intervenciones) el 25/02/2021 22:47:41
Buenas noches:
Quiero unir un canvas con un div contenteditable = true de forma que se obtenga una imagen con el contenido de los dos. Tengo uno sobre el otro de forma que se ve una imagen y el texto sobre ella.
Estoy utilizando la siguiente función: escritura_1 es el div y canvas3_1 el canvas
utilizando
El problema es que copia el contenido del div en el canvas, pero elimina el contenido anterior.
Necesito que se copie como png de forma que se combinen los contenidos.
Gracias de antemano
}
Quiero unir un canvas con un div contenteditable = true de forma que se obtenga una imagen con el contenido de los dos. Tengo uno sobre el otro de forma que se ve una imagen y el texto sobre ella.
Estoy utilizando la siguiente función: escritura_1 es el div y canvas3_1 el canvas
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function unir(){
$objetivo = document.querySelector("#escritura_1"),
$contenedorCanvas = document.querySelector("#canvas3_1");
html2canvas($objetivo) // Llamar a html2canvas y pasarle el elemento
.then(canvas => {
var nue_can = document.getElementById('canvas3_1');
var nue_can1 = nue_can.getContext("2d");
var imag = new Image();
imag.onload = function() {
nue_can1.drawImage(imag, 0, 0);
};imag.src = canvas.toDataURL("image/png");
// Cuando se resuelva la promesa traerá el canvas$contenedorCanvas.appendChild(canvas); // Lo agregamos como hijo del div
});
utilizando
1
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.1/dist/html2canvas.min.js"></script>
El problema es que copia el contenido del div en el canvas, pero elimina el contenido anterior.
Necesito que se copie como png de forma que se combinen los contenidos.
Gracias de antemano
}
Valora esta pregunta
0