将呈现的HTML保存为图像


Save rendered HTML as image

我正在构建一个需要导出div到图像的web应用程序。该div将包含图像,其他div, css样式的文本等。最后,用户应该有一个图像,看起来就像他已经采取了该div的截图一样。我已经查看了服务器端的php库,但我没有看到任何可以处理渲染HTML的复杂性的东西。HTML5画布具有这种功能,但我不能在我的案例中使用画布。什么好主意吗?

谢谢!

查看html2canvas。在画布元素上呈现页面内容的javascript框架。

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

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

这是你用来逐像素创建图像的方法http://php.net/manual/en/function.imagesetpixel.php

我写了一个项目,将HTML与CSS样式转换为画布。

可以在这里找到:https://github.com/coolbloke1324/html-to-canvas

和一个示例测试页面可在这里:http://www.isogenicengine.com/html-canvas/test/index.html

在测试页面上,初始加载将只显示一个正方形div,其中有一些其他div,具有各种样式,如背景和边界,包括边界半径等。你会在页面的右上角看到一个标有"渲染"的按钮。单击它,画布将被创建,然后DOM将被解析并呈现到画布上。我故意将画布的背景色改为黑色,这样你就可以看到差异了。