Question

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

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

我想要完成的一个示例是：https://jsfiddle.net/ununkg3a/

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

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

1 个答案: