8

有人可以帮我在 JavaScript 中创建 url 预览吗？

我的意思是：假设我的网站上有一个链接，我希望用户能够将鼠标悬停在链接上，并弹出一个图像，显示链接目标的样子。

不用担心 css，我得到了它的工作，我只需要实际的脚本来显示图像。

目前我正在通过显示一个实际呈现页面的 iframe 来做到这一点，但这不可扩展并且看起来很丑陋。

让页面显示预制图像不是一种选择，因为链接将链接到动态生成的用户内容。

4

7 回答 7

5

您需要预先存储图像。Javascript 无法截取屏幕截图并调整图像大小（目前）。试试这个：http ://snapcasa.com/ 。它为您动态拍摄图像。您所要做的就是热链接图像:)

使用http://snapcasa.com/时的最佳功能：

  1. 图像保证是最新的

  2. 您不必将它们存储在您的服务器上！

  3. 免费计划有很多积分供您燃烧！

于 2010-04-26T18:13:45.860 回答
3

丹尼尔是对的，客户无法做到这一点，但可以选择免费的缩略图服务；http://www.webresourcesdepot.com/10-free-website-thumbnail-generation-services/结合了一个不错的工具提示脚本： http: //flowplayer.org/tools/tooltip.html

于 2010-04-26T18:17:08.547 回答
3

如果你想更直接地控制你的截图并想在服务器上配置东西，你可以设置khtml2png或webkit2png * 在命令行上生成图像。（如果您愿意，这里是使用 Gecko 的一些方向。）

* webkit2png 为 OS X 提供了说明，但它确实没有理由不应该在 *nix 上运行，因为 WebKit 本身是跨平台的。弄清楚这一点可以留给读者作为练习，但它可能是值得的，因为 KHTML 在新功能（HTML5、CSS3 等）方面一直落后于 WebKit。

我还没有测试过这些解决方案中的任何一个，但如果您想更好地控制屏幕截图的生成，这可能就足够了。

于 2010-04-26T18:24:44.180 回答
2

无法在客户端生成网站预览。预览图像需要在服务器上呈现，然后可以使用简单的<img>标记将其调用到您的 HTML 文档中。

基本上你可以有一个图像标签，如下所示：

<img src="/my_preview_renderer.php?site=www.google.com" />

... wheremy_preview_renderer.php将实时生成预览并返回具有适当 mime 类型的图像数据。您可以使用任何服务器端脚本语言。

这不是一个详尽的答案，但我希望它可以为您指明正确的方向。

于 2010-04-26T18:13:19.407 回答
1

您可以使用 iframe 执行此操作，或支付截屏服务（我认为 Doctype.com 提供此服务）。付费服务仍然需要很长时间才能生成屏幕截图。基本上，不要费心去尝试，它是行不通的。

于 2010-04-26T18:12:45.503 回答
1

好吧，我认为由于这里的所有答案都有些陈旧，现在您可以使用大多数当前浏览器中的内置 web-kit 工具、使用 webrtc 或 js 中可用的 ffmpeg 工具来做到这一点，这种方法可以在几分钟内完成

于 2014-08-29T03:02:43.050 回答
1

2022 更新

终于，10 年后，有人创建了一个库来完成这项任务。您可以在他们的github上下载并获取更多信息。

简而言之，它的作用是：

提取网络链接信息：标题、描述、图像、视频等[通过 OpenGraph]，在手机和节点上运行。

这个插件是使用OpenGraph编写的。

您可以轻松使用这个非常简单的OpenGraph API。

对于原始资料和知识，请阅读有关 OpenGraph 的信息，如果您在 github 上找到的内容还不够令人满意，可以创建自己的库和插件。

例如，以下是 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>
于 2022-01-29T17:07:50.000 回答