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

Question

我有一个包含两个或三个图像的 div 元素。其中一个图像是具有一定比例和旋转的变换。我只想将整个 div 转换为单个图像。我使用了 html2canvas 并且我是它的忠实粉丝，但我的问题是具有转换属性的图像在所有浏览器中都不相同，它在 chrome 中运行良好，但在 Mozilla 和 IE 中运行良好。我也在使用最新版本的 html2canvas支持转换。您能否建议我另一种仅使用 javascript 而不是 jquery 将 div 转换为图像的方法。

Answer 1

如果您只需要对图像使用此功能并需要跟踪转换，那么我建议您仅使用画布。

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

请注意，CORS 限制适用（图像必须从与页面相同的服务器加载，或者允许托管服务器在 CORS 之外使用 - 一个例外是通过输入字段上传的图像)。

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