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()方法^[1]在 canvas 上繪制圖像。

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

復制下面的 JavaScript 代碼，不要干擾您當前在 JSFiddle 上的工作，然后單擊下載按鈕下載圖像。 然后查看下載圖像的屬性和內容：

---

^{1 - Html2Canvas 調整大小}