HTML5 / Canvas：网页预览？ [英] HTML5/Canvas: Web page preview?

问题描述

我可以使用canvas来生成网页的缩略图吗？

Can I use canvas to generate a thumbnail of a web page?

我有一个网页长度增长，垂直，用户使用的时间越长通过Ajax），要求用户垂直滚动以查看页面上的新内容。 （想想聊天室之类的东西。）

I have a web page that grows in length, vertically, the longer a user's on it (via Ajax), requiring the user to scroll vertically to see the new content on the page. (Think of something like a chatroom.)

我想做的是在浏览器窗口中生成一些小部分的缩略图，并显示在顶部用户可以预览页面底部显示的内容，而无需实际滚动来查看。

What I'd like to do is generate a little thumbnail of everything in the browser window's and display it at the top so that the user can get a preview of what appears at the bottom of the page without having to actually scroll to see it.

任何想法？

推荐答案

当你处理xhr响应时，你可以克隆它，并显示在顶部的预览

When you handle the xhr response you could clone it and display it at the top in a "preview" element, but shrunken (font-size: 6, shrink images, whatever).

不知道这个预览应该是多大（小）...

Not sure how big (small) this preview is supposed to be ...

编辑：

如果文本太小，在处理xhr之后，您可以测量下面的元素，然后创建缩放版本并将它们转储到预览元素。为文本块设置背景图像，其具有波浪线以指示其是什么等。然后点击它们将跳到页面的该部分...实际上听起来很有趣。

If it's too small for text, after you handle the xhr you could measure the elements down there and then create scaled versions and dump them into the preview element too. Set a background-image for "text" blocks that has squiggly lines to indicate what it is, etc. Then clicking them would jump you down to that section of the page ... Sounds interesting actually.

这篇关于HTML5 / Canvas：网页预览？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！