Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

317
Vistas
html2canvas bigger size of download image

I've set up html2canvas so I can edit text and then download that as image and that works great, but the size is limited to the width of its container.

If I set up canvas width and height render becomes that size but it's black. What am I doing wrong?

Here is the JSfiddle with everything working but if you add width and height (currently commented), rendered pictured will get black.

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
});
about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

After creating a new <canvas> element and setting the width and height attributes, the image is drawn on the canvas using the drawImage() method [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
});

Copy the JavaScript code below without disturbing your current work on JSFiddle and click the Download button to download the image. Then review the properties and content of the downloaded image:

enter image description here


1 - Html2Canvas Resize

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda