Question

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

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

无法与html2canvas很好地转换的样式：

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

Answer 1

广泛使用html2canvas库来直接从浏览器捕获Web内容。但是，它与转换后的元素可能效果不佳。

正如许多人所建议的，没有其他前端库在您的情况下运行良好。（您尝试过this吗？）

另一种可靠的方式是在服务器端完成捕获。您可以将标记发送到服务器，使用无头浏览器渲染并获取图像。

Phantom JS是基于Webkit的最佳选择。众所周知，它在大多数情况下都能很好地工作。

但是，Phantom JS不再积极开发。但这可能对您有帮助。

var page = require('webpage').create();
page.open('http://www.google.com', function() {
    setTimeout(function() {
        page.render('google.png');
        phantom.exit();
    }, 200);
});

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

1 个答案: