html2canvas 更大尺寸的下载图片

Question

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

如果我设置画布宽度和高度，渲染变为该大小，但它是黑色的。我做错了什么？

这里是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() 方法在画布上绘制图像^[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}