从HTML创建base64字符串

我需要从HTML页面中的特定DIV制作截图。我试图用这个库 - http://html2canvas.hertzen.com/从HTML创建base64字符串

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);

来源

2013-07-25 DoubleT

当你说图片“看起来有点模糊” - 你将它转换为JPEG而不指定质量。你尝试过'canvas.toDataURL（'image/jpeg'，1）;'？ - 质量参数范围从0到1，不确定默认值是多少，但它会接近0.8（有损）。尝试了 – Emissary

HTML5画布对文本阴影http://www.html5rocks.com/en/tutorials/canvas/texteffects/

库支持你使用可能只是不正确地支持它，或者它不搜索CSS。

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

另一种方式去使用像http://browsershots.org

屏幕截图Web服务，您将创建一个最小的HTML文件，该文件只包含您想要的CSS和DIV并保存（与PHP）到您的网页目录。然后，您会将该网址传递给网络服务，并获得图像（屏幕截图）作为回应。

来源

2013-07-25 12:36:13

也许我会尝试在画布上自己重新创建DIV，然后将其解析为.toDataURL（）; – DoubleT

我终于让它有点不同了。我做了自定义画布，并填充了我从AJAX获得的数据。画布支持所有阴影和东西。 $（'＃bigCard'）。html（$（''））; var canvas = $（“＃anniversary”）[0]; var context = canvas。的getContext（ '2D'）; var base_image = new Image（）; base_image.src ='礼物/ img/bigcard/bigCard100.png'; context.drawImage（base_image，0，0）; //在这里我把所有的文字在图片上 – DoubleT

@ user1199899 - 很高兴你有一个解决方案 –

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

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

它易于使用，并做了工作。我希望它有帮助。

来源

2013-07-25 12:24:28 David

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

的模糊是最有可能是由于您在保存图像为JPEG，尝试改为为png：

canvas.toDataURL('image/png')

来源

2013-07-25 12:31:17 Strille

，仍然很糟糕。 – DoubleT

从HTML创建base64字符串

回答

相关问题