javascript - 从 HTML 创建 base64 字符串

Question

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

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

但它在某些 CSS 内容(例如文本阴影)方面存在问题，并且某些文本看起来不太好。而且图片看起来有点模糊。

还有其他解决办法吗？

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

制作文本阴影的CSS是这样的:

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

Answer 1

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

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

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

<小时/>

另一种方法是使用屏幕截图网络服务，例如 http://browsershots.org

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