0
324
Vistashtml2canvas tamaño más grande de la imagen de descarga
Configuré html2canvas para poder editar texto y luego descargarlo como imagen y funciona muy bien, pero el tamaño está limitado al ancho de su contenedor.
Si configuro el ancho y la altura del lienzo, el renderizado se convierte en ese tamaño pero es negro. ¿Qué estoy haciendo mal?
Aquí está el JSfiddle con todo funcionando, pero si agrega ancho y alto (actualmente comentado), la imagen renderizada se volverá negra.
JavaScript
html2canvas(document.getElementById("imagewrap"), { onrendered: function(canvas) { canvas.className = "html2canvas"; // canvas.width = "1080"; // canvas.height = "1920"; document.getElementById("canvasWrapper").appendChild(canvas); var image = canvas.toDataURL("image/png"); document.getElementById("downloadLink").href = image; }, useCORS: true });1 Respuestas
Responde la pregunta0
Después de crear un nuevo elemento <canvas> y establecer los atributos de width y height , la imagen se dibuja en el lienzo usando el método drawImage() [1] .
html2canvas(document.getElementById("imagewrap"), { onrendered: function(canvas) { var _canvas = document.createElement("canvas"); _canvas.setAttribute('width', 1080); _canvas.setAttribute('height', 1920); var ctx = _canvas.getContext('2d'); ctx.drawImage(canvas, 0, 0, canvas.width, canvas.height, 0, 0, 1080, 1920); var dataURL = _canvas.toDataURL(); document.getElementById("canvasWrapper").appendChild(_canvas); var image = _canvas.toDataURL("image/png"); document.getElementById("downloadLink").href = image; }, useCORS: true });Copie el código JavaScript a continuación sin interrumpir su trabajo actual en JSFiddle y haga clic en el botón Descargar para descargar la imagen. Luego revise las propiedades y el contenido de la imagen descargada:
1 - Cambiar el tamaño de Html2Canvas