javascript - 从 HTML 创建 base64 字符串

Question

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

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

但是它有一些 CSS 的问题（例如 text-shadow ）并且一些文本看起来不太好。而且图片似乎有点模糊。

还有其他解决方案吗？

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

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

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

score 0 · Accepted Answer

几个月前我做了类似的事情。我使用了这个库：

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

score 0 · Accepted Answer

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

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

canvas.toDataURL('image/png')

score 0 · Accepted Answer

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

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

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

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

3 回答 3