将 HTML 片段栅格化为 PNG
我有一个包含一系列 div 的页面。每个 div 代表幻灯片组中的一张幻灯片。我需要一系列缩略图，每张幻灯片一个。理想情况下，这些缩略图应该是幻灯片的光栅化版本：PNG data: url 将是完美的。我希望工作在浏览器中完成，并且我可以接受仅在一种现代浏览器（例如 chrome 或 firefox）中工作的事情。我怀疑这是不可能的，但很想听听其他情况。
canvas 对象上的方法 toDataURL() 本质上就是我想要的，但所讨论的 div 不是 canvas 的实例，因此这不起作用。
I have a page with a series of divs. Each div represents a slide in a slide deck. I need a series of thumbnails, one for each slide. Ideally these thumbnails would be rasterized versions of the slides: a PNG data: url would be perfect. I'd like the work to be done in the browser, and I'm okay with things that only work in one of the modern browsers (e.g. chrome, or firefox). I suspect this is impossible, but would love to hear otherwise.
The method toDataURL() on the canvas object is essentially what I want, but the divs in question aren't instances of canvas, so that won't work.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
一种解决方案是将 HTML 作为嵌入到 SVG 图像中，然后通过 ctx.drawImage() 绘制结果图像，从而将 HTML 渲染到画布上。
请阅读此处有关 MDN 的文章，或查看 rasterizeHTML.js 这是上述方法的实现。
限制是您的内容应该都是同源干净的（即可以通过 AJAX 访问）。
免责声明：我是 rasterizeHTML.js 的作者。
One solution can be to render HTML to a canvas by embedding the HTML into an SVG image as a
<foreignObject>and then drawing the resulting image viactx.drawImage().Read the article on MDN here, or take a look at rasterizeHTML.js which is an implementation of said approach.
The limitations are that your content should all be same-origin clean (i.e. accessible by AJAX).
Disclaimer: I am the author of rasterizeHTML.js.
在客户端这是不可能的，因为这是禁止的，以防止潜在的欺诈行为，例如 ie 脚本会使用一些私人数据截取您的页面屏幕截图并将其发送到天知道在哪里。
虽然...
可以复制整个 HTML 以将其用作缩略图预览/其他内容，并使用 CSS3 转换（缩放）+在其上添加覆盖层以防止交互/文本选择等来模仿 div 的缩略图。
firefox/chrome 扩展中有一个选项可以将页面保存到图像 - 尽管不确定是否可以仅将页面的一部分作为图像
或者您始终可以像谷歌在其搜索结果页面上通过页面预览所做的那样（单击放大镜靠近结果标题） - 有一个机器人机器，它进入页面并截取任何内容的屏幕截图，以使用此数据生成页面预览 - 不知道您有多想这样做，但如果您非常想要它。 .. :)
恐怕没有简单的方法可以做您想做的事情，并且CSS3 技巧之一似乎是最容易实现的。
It isn't possible on the client side as this is forbidden to protect from potential frauds like for ie script that would take a screenshot of your page with some private data and send it god one knows where.
Although...
it is possible to copy whole HTML to use it as a thumb preview/whatever and use CSS3 transformations (scaling) + add overlay over it to prevent interactions/text selection etc to mimic a thumbnail of a div.
and there was an option in firefox/chrome extensions to save page to an image - though not sure if it was possible to take only part of the page as an image
or you can always do like google does on its search results page with their page preview (click the magnifying lens near the result title) - have a robot machine which enters the page and takes a screenshot of whatever to produce the preview of the page using this data - don't know how much you WANT to do that but if you wanted it that bad... :)
I'm afraid there is no easy way to do what you want and the CSS3 trick one seems to be the easiest one to pull of.
您可以使用 rasterizeHTML 库将 html 栅格化为 javascript 中的
元素：http://cburgmer.github.io/rasterizeHTML.js/
you can rasterize html to a
<canvas>element in javascript with the rasterizeHTML library:http://cburgmer.github.io/rasterizeHTML.js/