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

Question

我有一个 div 元素，其中包含两个或三个图像。其中一张图像经过一定比例和旋转的变换。我只想将整个 div 转换为单个图像。我使用 html2canvas 并且我是它的忠实粉丝，但我的问题是具有转换属性的图像在所有浏览器中都不相同，它在 chrome 中工作正常，但在 Mozilla 和 IE 中则不然。我还使用最新版本的 html2canvas，其中支持transform。你能建议我另一种仅使用javascript而不是jquery将div转换为图像的方法吗？

Answer 1

如果您只需要图像并需要跟踪变换，那么我建议仅使用 Canvas 。

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

请注意CORS 存在限制(图像必须从与页面相同的服务器加载，或者由托管服务器授予在 CORS 之外使用的权限 - 一个异常(exception)是通过输入字段上传的图像)。

有很多关于如何设置 Canvas 并通过旋转/变换绘制图像的示例。