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

Question

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

Answer 1

如果你只需要这个图片并且需要跟踪变换，那么我建议只使用画布。

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

请注意， CORS 限制适用（图片必须从同一服务器加载到页面，或者由托管服务器授予在CORS外部使用的权限 - 一个例外是通过输入字段）。

在SO上有很多关于如何设置画布和使用旋转/变换绘制图像的例子。