使用javascript将html内容转换为图像

我有一个div元素，其中包含两个或三个图像。其中一个图像是通过一定比例和旋转进行变换的。我只是想将整个div转换为单个图像。我用html2canvas，我是一个很大的粉丝，但我的问题是，具有变换属性的图像在所有浏览器中都不相同，它在Chrome中正常工作，但不在Mozilla和IE.I中也使用最新版本的html2canvas转换支持。你可以建议我另一种方法来转换div到图像只使用JavaScript而不是jQuery。使用javascript将html内容转换为图像

来源

2014-12-06 Ahtisham

看到这个链接http://stackoverflow.com/questions/9075792/save-export-image-file-from-html-content – 2014-12-06 11:40:00

如果你只是需要这个图像和需要跟踪变换，那么我会建议只使用画布。

在该div内插入一个画布元素而不是图像，然后用相应的变换（平移，旋转等）将它们绘制到需要的图像上。从那里只需拨打toDataURL()即可将所有内容保存为单个图像。

注意CORS限制适用（图片必须从同一个服务器页面，或获准加载到由托管服务器使用外CORS - 唯一的例外是通过输入字段上传的图片）。

对于如何设置画布和使用旋转/变换绘制图像，SO上存在很多示例。

来源

2014-12-06 11:31:05 K3N

你好肯Fyrstenberg !!感谢response.i尝试这种方法它不解决我的问题，因为在我的div只显示图像的一部分。我想捕捉可见的div。 – Ahtisham 2014-12-06 11:42:18

@Ahtisham只是使用drawImage的裁剪参数来绘制你想要的部分图像。 – K3N 2014-12-06 11:43:10

这种方法会变得更复杂，因为我有不同的场景，但我会尝试它。你建议我另一种方法，而不是在画布上绘制多个图像，如html2canvas。 – Ahtisham 2014-12-06 11:52:42

使用javascript将html内容转换为图像

回答

相关问题