从HTML创建base64字符串

Create base64 string from HTML

本文关键字：字符串 base64 创建 HTML      更新时间：2023-09-26

我需要从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，那么可能会找到一个硬编码（特定）的解决方案。

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

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

几个月前我做过这样的事情。我用过这个库：

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

它很容易使用，而且做得很好。我希望它能有所帮助。

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

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

canvas.toDataURL('image/png')
相关文章：