html2canvas 更大尺寸的下载图片

Question

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
});

Answer 1

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:

---

^{1 - Html2Canvas Resize}