使用 html2canvas 定位特定 div

Question

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

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

这里是我要完成的示例：https://jsfiddle.net/ununkg3a/

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

这样的事情是不是不可能完成？每当我将 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)

使用 html2canvas 定位特定 div

Targeting a specific div with html2canvas

html

javascript

css

jquery

html2canvas