将呈现的HTML保存为图像

Question

我正在构建一个需要将div导出到图像的Web应用程序。该div将包含图像，其他div，带有CSS样式的文本等。最后，用户应该拥有一个看起来与他截取该div的截图相同的图像。我已经研究过服务器端的php库，但是我没有看到任何可以处理渲染HTML复杂性的东西。 HTML5画布具有该功能，但我无法使用画布。有什么想法吗？

谢谢！

Answer 1

结帐html2canvas。一个javascript框架，用于在canvas元素上呈现页面内容。

Answer 2

您可以将div包装在canvas标记中，直接访问像素数据，将其发送到PHP脚本并使用数据构建图像。

以下是获取像素数据的方法 https://developer.mozilla.org/en/html/canvas/pixel_manipulation_with_canvas

以下是您将用于逐像素创建图像的内容 http://php.net/manual/en/function.imagesetpixel.php

Answer 3

我编写了一个项目，将带有CSS样式的HTML转换为画布。

可在此处找到：https://github.com/coolbloke1324/html-to-canvas

此处提供了一个示例测试页面：http://www.isogenicengine.com/html-canvas/test/index.html

在测试页面上，初始加载将显示一个方形div，其中包含一些其他div，其中包括背景和边框等各种样式，包括边框半径等。您将在页面右上角看到一个按钮“渲染”。单击它，将创建一个画布，然后将解析DOM并将其渲染到画布。我故意将画布的背景颜色改为黑色，这样你就可以看到差异了。