0

我需要在鼠标悬停时预览 url，我的应用程序是基于 php、js 和 jquery 构建的。虽然我有一个想法来满足我的要求，但对正确的方法有点困惑，我检查了这里发布的所有问题，但其中大多数是指一些第三方工具或可安装的。Frnakly 我不想使用它们，我认为我应该自己尝试一个。请您按照您的要求指导我完成最佳步骤吗？

谢谢！

2012 年 6 月 11 日最后我设法使用 Curl 并在我网站上的链接旁边放置的 Div 上预览网站，现在问题是在 Div 中拟合内容..有没有办法让我可以调整提取的 html 页面的 css 以使所有内容都适合 Div.scaledown 选项的固定高度和宽度吗？这会将所有内容缩小到所需的比例？

4

4 回答 4

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>
于 2012-06-10T17:31:52.770 回答
0

好的，所以您想要获取网页的缩略图并在鼠标悬停时显示它。为此，您需要使用生成缩略图的工具或自己编写 PHP 脚本。这里有一些工具：

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

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

于 2012-06-10T17:36:54.843 回答
0

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

这是使用 PHP 的样子：

<?php

$params = http_build_query(array(
    "access_key" => "YOUR_ACCESS_KEY"
    "url" => "https://example.com",
));

$image_data = file_get_contents("https://api.apiflash.com/v1/urltoimage?" . $params);
file_put_contents("screenshot_api_example.jpeg", $image_data);

?>

该 API 的正常运行时间非常好，因为它基于 AWS Lambda。

在此处输入图像描述

于 2019-03-26T16:11:03.240 回答
0

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

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

您可以看到传递给 Urlbox API 的选项只是url和thumb_width以设置所需的缩略图宽度（以像素为单位），在本例中我选择了 400 像素宽。

现在你要做的就是将它嵌入到这样的<img>标签中：

<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"/>

于 2017-06-23T12:56:36.800 回答