我需要从 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);
最佳答案
HTML5 Canvas 支持文本阴影 http://www.html5rocks.com/en/tutorials/canvas/texteffects/
您正在使用的库可能只是无法正确支持它,或者它没有搜索 CSS。
如果您共享 DIV 标记和 CSS,则可能会达到硬编码(特定)解决方案。
另一种方法是使用屏幕截图网络服务,例如 http://browsershots.org
您将创建一个最小的 HTML 文件,其中仅包含所需的 CSS 和 DIV,并将其(使用 PHP)保存到您的 Web 目录。然后,您可以将该 URL 传递给 Web 服务并获得图像(屏幕截图)作为响应。
关于javascript - 从 HTML 创建 base64 字符串,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17857545/