html2canvas 更大尺寸的下载图片

Question

我已经设置了 html2canvas，这样我就可以编辑文本，然后将其下载为图片，效果很好，但大小受限于宽度它的容器。

如果我设置 canvas 宽度和高度渲染会变成那个尺寸但它是黑色的。我做错了什么？

这里是 JSfiddle，一切正常，但如果您添加宽度和高度（当前已注释），呈现的图片将变黑。

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

创建新的<canvas>元素并设置width和height属性后，使用drawImage()方法在canvas上绘制图像^[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
});

在不影响您当前在 JSFiddle 上工作的情况下复制下面的 JavaScript 代码，然后单击“下载”按钮下载图像。然后查看下载图片的属性和内容：

^{1 - Html2Canvas Resize}

html2canvas 更大尺寸的下载图片

html2canvas bigger size of download image

javascript

html2canvas