有人可以帮我在 JavaScript 中创建一个 url 预览吗？
我的意思是：假设我的网站上有一个链接，我希望用户能够将鼠标悬停在链接上，并弹出一个图像，显示链接目标的样子。
不用担心 css，我已经搞定了，我只需要实际的脚本来显示图像。
目前我正在通过显示一个实际呈现页面的 iframe 来做到这一点，但这不可扩展且看起来很丑陋。
让页面显示预制图像不是一种选择，因为链接将链接到动态生成的用户内容。
【问题讨论】：
标签： javascript html preview
您需要预先存储图像。 Javascript 无法截取屏幕截图并调整图像大小（目前）。试试这个：http://snapcasa.com/。它为您动态拍摄图像。您所要做的就是热链接图像:)
使用http://snapcasa.com/时的最佳功能：
图片保证是最新的
您不必将它们存储在您的服务器上！
免费计划有很多积分供您使用！
【讨论】：
Daniel 是对的，客户无法做到这一点，但可以选择免费的缩略图服务； http://www.webresourcesdepot.com/10-free-website-thumbnail-generation-services/ 结合漂亮的工具提示脚本：http://flowplayer.org/tools/tooltip.html
【讨论】：
如果您想更直接地控制您的屏幕截图并想在服务器上进行配置，您可以设置khtml2png 或webkit2png* 以在命令行上生成图像。 （如果您愿意，here 是使用 Gecko 的一些方向。）
* webkit2png 为 OS X 提供了说明，但确实没有理由不应该在 *nix 上运行，因为 WebKit 本身是跨平台的。弄清楚这一点可以留给读者作为练习，但它可能是值得的，因为 KHTML 在新功能（HTML5、CSS3 等）方面一直落后于 WebKit。
我还没有测试过任何这些解决方案，但如果您想更好地控制屏幕截图的生成，这可能就足够了。
【讨论】：
无法在客户端生成网站预览。预览图像需要在服务器上呈现，然后可以使用简单的<img> 标记将其调用到您的 HTML 文档中。
基本上你可以有一个图像标签，如下所示：
<img src="/my_preview_renderer.php?site=www.google.com" />
... 其中my_preview_renderer.php 将实时生成预览并返回具有适当mime 类型的图像数据。您可以使用任何服务器端脚本语言。
这不是一个详尽的答案，但我希望它能为您指明正确的方向。
【讨论】：
您可以使用 iframe 执行此操作，或者付费购买截取屏幕截图的服务（我认为 Doctype.com 提供此服务）。付费服务仍然需要很长时间才能生成屏幕截图。基本上，不要费心去尝试，它不会起作用的。
【讨论】：
好吧，我认为由于这里的所有答案都有些陈旧，现在您可以使用大多数当前浏览器中的内置 web-kit 工具、使用 webrtc 或 js 中可用的 ffmpeg 工具来执行此操作，这样的方法可以在分钟
【讨论】：
终于，10 年后，有人创建了一个库来完成这项任务。您可以在他们的github 上下载并获取更多信息。
简而言之它的作用：
提取网页链接信息：标题、描述、图片、视频、 等[通过 OpenGraph]，在手机和节点上运行。
这个插件是使用OpenGraph编写的。
您可以轻松使用这个非常简单的OpenGraph API。
如果您在 github 上找到的内容不够令人满意，请阅读有关 OpenGraph 的原始资料和知识，并可能创建您自己的库和插件。
例如，以下是 IMDB 上 The Rock 的 Open Graph 协议标记：
<html prefix="og: https://ogp.me/ns#">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="https://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" />
...
</head>
...
</html>
【讨论】：