我有一系列div的页面。每个div代表幻灯片中的幻灯片。我需要一系列缩略图，每张幻灯片一张。理想情况下，这些缩略图将是幻灯片的光栅化版本：PNG data:网址将是完美的。我希望在浏览器中完成这项工作，我可以使用仅适用于现代浏览器之一的东西（例如chrome或firefox）。我怀疑这是不可能的，但我很乐意听到。
canvas对象上的方法toDataURL()基本上就是我想要的，但是所讨论的div不是canvas的实例，因此不起作用。
答案 0 :(得分：9)
一种解决方案是将HTML呈现为画布，方法是将HTML作为<foreignObject>嵌入到SVG图像中，然后通过ctx.drawImage()绘制生成的图像。
阅读article on MDN here，或查看rasterizeHTML.js这是所述方法的实现。
限制是您的内容应该是同源干净的（即可通过AJAX访问）。
免责声明：我是rasterizeHTML.js的作者。
答案 1 :(得分：3)
在客户端是不可能的，因为这是禁止的，以防止潜在的欺诈行为，例如脚本会截取您的页面的屏幕截图与一些私人数据并发送它上帝知道在哪里。
...虽然
可以复制整个HTML以将其用作拇指预览/其他并使用CSS3转换（缩放）+在其上添加叠加以防止交互/文本选择等模仿div的缩略图。< / p>
并且firefox / chrome扩展程序中有一个选项可以将页面保存到图像中 - 但不确定是否可以将部分页面作为图像
或者你总是像谷歌一样在搜索结果页面上做他们的页面预览（点击结果标题附近的放大镜） - 有一个机器人机器进入页面并截取任何生产的屏幕截图使用这些数据预览页面 - 不知道你想要多少，但如果你想要那么糟糕......：）
我担心没有简单的方法可以做你想做的事情，CSS3技巧似乎是最容易实现的。
答案 2 :(得分：0)
您可以使用rasterizeHTML库将html格式化为javascript中的<canvas>元素：
http://cburgmer.github.io/rasterizeHTML.js/