Question

我们有一个用例，我们想要在富文本编辑器（ckeditor）中拍摄内容的图像。我们目前正在使用html2canvas（http://html2canvas.hertzen.com/），它在某种程度上工作得很好，但下面是我们面临的一些问题：

a）如果html的图像托管在不同的服务器上（由于跨域限制需要代理），Html2Canvas需要一个代理（在java中编写我自己的代理）服务器来获取图像，我们遇到了问题当在不同服务器上托管大量图像时，拍摄图像/快照的过程会花费大量时间。如果网址被破坏，也会影响拍摄图像的时间。

我想知道是否有任何可靠的解决方案来获取dom元素的图像/快照，这些元素也具有跨浏览器兼容性并且速度快。

以下是我对一些替代方案进行的一些研究，但需要一些建议。

PhantomJs：我看了一下phantomJs，它允许在浏览器世界之外拍摄图像但是如果觉得使用幻像可能只是在做，因为它需要大量的构建设置和它包含的完整不同的库。

基于svg的解决方案：我遇到了这个链接（https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas），它显示了使用svg元素拍摄快照。我不确定跨浏览器的兼容性以及它如何处理外部托管的图像。

Answer 1

PhantomJS很棒，但是他们的API太冗长了。如果你想使用PhantomJS但界面友好，那么看看CasperJS。

您可以轻松捕获网站：

casper.start('http://www.google.fr/', function() {
    this.capture('google.png', {
        top: 100,
        left: 100,
        width: 500,
        height: 400
    });
});

casper.run();

将html转换为图像（拍摄dom的快照）

1 个答案: