从HTML创建base64字符串

Question

我需要在HTML页面中从特定DIV制作屏幕截图。 我试图使用这个库 - http://html2canvas.hertzen.com/

html2canvas($(".element"), {
    onrendered: function(canvas) {
        console.log(canvas.toDataURL('image/jpeg'));
    }
});

但它有一些CSS的问题（例如文本阴影）和一些文本看起来不太好。而且图片看起来有点模糊。

还有其他解决方案吗？

我的DIV包含背景图片和文字。 我考虑使用PHP GD库打开背景图像并在其上放置文本，但又出现了文本阴影，我不知道该怎么做。

制作text-shadow的CSS是这样的：

text-shadow: 0px 1px 0px rgba(0,0,0,0.2);

Answer 1

几个月前我做过类似的事。我用过这个库：

http://www.nihilogic.dk/labs/canvas2image/

它易于使用并完成了这项工作。 我希望它有所帮助。

Answer 2

html2canvas并不真正拍摄实际的屏幕截图，而是使用画布重新创建html元素的外观。这就是为什么它看起来不正确（阴影等）。

模糊很可能是因为您将图片保存为jpeg，请尝试使用png：

canvas.toDataURL('image/png')

Answer 3

HTML5 Canvas支持文字阴影http://www.html5rocks.com/en/tutorials/canvas/texteffects/

您正在使用的库可能只是不正确支持它，或者它没有搜索CSS。

如果您共享DIV标记和CSS，则可能会达到硬编码（特定）解决方案。

---

另一种方法是使用像http://browsershots.org

这样的屏幕截图网络服务

您将创建一个仅包含所需CSS和DIV的最小HTML文件，并将其（使用PHP）保存到您的Web目录中。然后，您将该URL传递给Web服务并获取图像（屏幕截图）作为响应。