Question

我需要在鼠标悬停时预览网址，我的应用程序是基于php，js和jquery构建的。虽然我有想法达到我的要求，但我对正确的方法有点困惑，我在这里查看了所有发布的问题，但大多数都是指一些第三方工具或可安装程序。 Frnakly我不想使用它们，并认为我应该自己尝试一个。请你按照你的指示，尽可能地指导我完成最好的步骤吗？

谢谢！

11君2012 最后我设法使用Curl并在我网站上链接旁边的Div上预览网站，现在问题是在Div中的内容是否合适..有一种方法我可以调整css提取的html页面是否所有内容都适合Div.scaledown选项的固定高度和宽度？那会把所有东西都缩小到所需的比例吗？

Answer 1

你可以用简单的'CSS和HTML：

来做到这一点

.mouseover {
  position:absolute;
  width:200px;
  height:200px;
  top:5px;
  left:5px;
  display:none;
}
.link {
  position:relative;
}
.link:hover .mouseover {
  display:block;
}

然后，在HTML中：

<a href="#" class="link">Link
  <div style="background:url('<URL HERE>')" class="mouseover"></div>
</a>

Answer 2

好的，所以你想得到一个网页的缩略图并在鼠标上显示它。要做到这一点，您需要使用生成缩略图的工具或自己编写PHP脚本。以下是一些工具：

websnapr
Website Thumbnail Generator - 您可以在自己的服务器上安装

如果您想自己编写，请查看imagegrabwindow。请注意，它需要Windows服务器。我不知道PHP是否有任何其他方法可以做到这一点。如果您不在Windows服务器上，可以编写一个bash脚本来打开浏览器并使用screenshot utility截取屏幕截图并将其保存到文件中以供您的网站选择。

您还必须确保拥有某种缓存，这样每次用户将鼠标移到链接上时都不会这样做。

Answer 3

您可以使用urlbox.io，这是此网址的示例预览缩略图：

https://api.urlbox.io/v1/ca482d7e-9417-4569-90fe-80f7c5e1c781/32040df25d7c57da28ef4da7ce461af00d852653/png?url=https%3A%2F%2Fstackoverflow.com%2Fquestions%2F10970647%2Fthumbnail-preview-of-a-url-using-php-and-javascript&thumb_width=400

您可以看到传入Urlbox API的选项只是 url ， thumb_width 可设置所需的缩略图宽度（以像素为单位），在这种情况下，我选择了400像素宽。

现在您要做的就是将其嵌入<img>标记，如下所示：

＆＃13;

<img src="https://api.urlbox.io/v1/ca482d7e-9417-4569-90fe-80f7c5e1c781/32040df25d7c57da28ef4da7ce461af00d852653/png?url=https%3A%2F%2Fstackoverflow.com%2Fquestions%2F10970647%2Fthumbnail-preview-of-a-url-using-php-and-javascript&thumb_width=400"/>

＆＃13;

Answer 4

您可以使用API来执行此操作。例如ApiFlash有一个免费计划，您每月最多可以使用100个屏幕截图。

这是PHP的样子：

>>> def coalesce(*args):
...     return reduce(lambda acc, col: acc.combine_first(col), args)
...
>>> coalesce(*cols)
0    1.0
1    2.0
2    7.0
Name: A, dtype: float64

该API具有非常good uptime的特征，因为它基于AWS Lambda。

使用php和javascript的URL的缩略图预览

4 个答案: