javascript - 如何在不使用 html2canvas 的情况下将 div 转换为图像？

Question

我有一个 div，其中有一堆用 CSS 转换的元素。该div需要转换为图像。

我尝试过使用 html2canvas，但它不能很好地支持 Transformed 元素，因此导出的图像看起来与浏览器显示的方式完全不同。在不使用 html2canvas 的情况下将带有样式元素的 div 转换为图像的最佳方法是什么？

无法很好地使用 html2canvas 转换的样式:

transform:  perspective(100px) rotateY(10deg) rotateX(2deg) rotate(-11.5deg);

Answer 1

使用Phantom JS这里不是答案，因为它将捕获整个页面，这里最好的方法是 domtoimage将 div 转换为图像的库。

脚本

<script src="path/to/dom-to-image.min.js" />
<script>
var node = document.getElementById('my-node');

domtoimage.toPng(node)
.then(function (dataUrl) {
    var img = new Image();
    img.src = dataUrl;
    document.body.appendChild(img);
})
.catch(function (error) {
    console.error('oops, something went wrong!', error);
});
</script>