将HTML的片段栅格化为PNG [英] Rasterize a fragment of HTML to PNG

问题描述

我有一个页面与一系列的div。每个div表示幻灯片中的幻灯片。我需要一系列缩略图，每个幻灯片一个。理想情况下，这些缩略图将是幻灯片的光栅化版本：一个PNG 数据： url将是完美的。我希望工作在浏览器中完成，我可以对只在一个现代浏览器（例如chrome或firefox）中工作的东西。我怀疑这是不可能的，但愿意听到别的。

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.

在canvas对象上的方法 toDataURL（）本质上是我想要的， t的canvas实例，所以不会工作。

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.

推荐答案

这是不可能在客户端，因为这是禁止保护免受潜在的欺诈，您的页面的屏幕截图与一些私人数据，并发送它神一个知道在哪里。

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.

虽然...

• HTML来使用它作为一个大拇指预览/任何和使用CSS3转换（缩放）+添加覆盖，以防止交互/文本选择等模仿一个div的缩略图。

• 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.

，并且在Firefox / chrome扩展程序中有一个选项可将页面保存为图片 - 但不确定是否可以只将页面的一部分用作图片

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

或者你可以像google一样在搜索结果页面上进行页面预览（点击结果标题附近的放大镜头） - 有一个机器人机器进入页面并截取任何内容使用这些数据产生页面的预览 - 不知道你想要做多少，但如果你想要那个坏...：）

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... :)

恐怕没有什么简单的方法可以做你想要的，CSS3的技巧似乎是最简单的一个。

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.

这篇关于将HTML的片段栅格化为PNG的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！