使用 jquery 生成网站的屏幕截图

Posted 2023-03-29

【中文标题】使用 jquery 生成网站的屏幕截图

【英文标题】：generating a screenshot of a website using jquery

【发布时间】：2011-05-31 20:37:18

【问题描述】：

我想使用严格的 javascript 生成任何给定 url 的屏幕截图缩略图。如果无法做到这一点，任何人都可以为我指出正确的方向来使用我自己的 api 做到这一点吗？

编辑我只是决定作弊并使用框架，因为无论如何我都是为了好玩而做的事情，但是感谢所有很棒的答案，如果你想做这样的事情，khtmltox 可能是最好的选择......他们也也有 php 绑定。

【问题讨论】：

仅使用 JS 几乎是不可能的。

如果你只想使用 JavaScript，那为什么要使用 php 标签？

【参考方案1】：

如果您查看wkhtmltox，就会发现有用于将网页转换为图像的原生 lib/app。

<?php // file: img.php
    $img=render_image($_GET['url']);
?>


<!-- Your Website -->

<img alt='ldr'/>

<script type="text/javascript">
    $(document).ready(function()
        var url='http://google.com/';
        $('#img').attr('src','img.php?url='+encodeURIComponent(url));
    );
</script>

如果注释不够清楚，您需要在某个可以运行本机程序的地方使用 PHP。

【讨论】：

这可能是正确的答案，页面使用Webkit布局引擎解析，然后保存为图像。

【参考方案2】：

绝对有零机会使用 Javascript 做到这一点。

实际上，使用任何“网络”式技术根本没有机会实现这一点。可能有一个时髦的 flash 应用程序，我不知道（如果存在，还有一个讨厌 flash 的理由：p）。

【参考方案3】：

不会发生。您可以使用 JS 执行此操作的唯一方法是，如果站点托管在您的服务器上，并且您有 JS 触发某个 shell 脚本，该脚本在本地服务器上呈现用户页面并将其保存为图像。

您想要订阅browser shots

【参考方案4】：

在 Javascript 中没有办法做到这一点。

我相信这可以通过服务器端使用第三方软件来完成。 请查看this tutorial 了解更多信息。

【讨论】：

canvas html5 + javascript 可以实现

【参考方案5】：

有点老了，但我遇到了同样的问题，发现http://html2canvas.hertzen.com/

【讨论】：

使用闪存。如果是面向公众的网站，则不能依赖访问者运行 Flash。

【参考方案6】：

您不能仅使用 JavaScript 来做到这一点。您必须使用 SnapCasa 或类似的服务（基本上归结为正确格式的 img 标记，因此从您的角度来看，这都是客户端）。

【参考方案7】：

目前在纯 js 中是不可能的。

我在负责生成图片的服务器上安装了cutycap 并且通过一些 js ajax 魔法，您可以轻松创建自己的屏幕截图 - 缩略图服务

【参考方案8】：

需要获取屏幕截图网站查看结帐这是一个 phpwdn.com

【参考方案9】：

我最近创建了一个任何人都可以用来生成网站屏幕截图的 REST API。它是免费的（当然），也可能对您有所帮助。

以下是我的一些实验的链接。

可混搭的屏幕截图 http://storage.damnovae.com/issac/ba3d01a1ddeeb068fd365eb8468c4cd35150d143.png

Pinterest http://storage.damnovae.com/issac/f3419f73e840f2684fa15cb14154d507484b7318.png

Envato 使用移动端口视图的屏幕截图 http://storage.damnovae.com/issac/81c875e6622ca105db4135b19cde6b83d148b21f.png

它是如何工作的

获取你的pastiche账号api key，然后向api url发出post请求以生成截图。你可以在这里阅读更多内容http://damnovae.com/pastiche