javascript - 使用 html2canvas 定位特定 div

Question

我正在使用 Hertzen 的 html2canvas.js，并尝试调整示例代码，使其针对特定的 div 而不是文档的整个正文:

html2canvas(document.body, {
  onrendered: function(canvas) {
    document.body.appendChild(canvas);
  }
});

我想要完成的示例如下:https://jsfiddle.net/ununkg3a/

单击“保存 PNG”按钮时，我想附加我在特定 div 中定位的 jQuery 生成的方 block 的图像。在代码中，它似乎附加了一些东西，但它没有高度。当我尝试设置输出的高度时，它仍然无法按预期工作。

这样的事情是不可能完成的吗？每当我将 document.body 更改为另一个元素时，屏幕截图就不会再呈现，尽管当我将其更改回 document.body 时它会呈现。有人告诉我，我必须用 js 裁剪图像，但这似乎有点 hacky。

Answer 1

它可以:它是第一个属性。 (fiddle)

示例:

html2canvas(document.getElementById('test')).then(function(canvas) {
    document.body.appendChild(canvas);
});

<小时/>

在您的示例中，canvas2html 无法找出您的 div 的高度。因此它会回落到 0px 高度，所以你不会看到任何东西。

给#art宽度，然后你可以手动计算高度并使用它。

数学示例:
art_square_width = 10px
art_square_height = 10px
art_square_amount = 500
art_width = 250px
art_height = art_width/(art_width/art_square_width) * art_square_height = 200px

(fiddle)