【问题标题】:generating a screenshot of a website using jquery使用 jquery 生成网站的屏幕截图
【发布时间】:2011-05-31 20:37:18
【问题描述】:

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

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

【问题讨论】:

  • 仅使用 JS 几乎是不可能的。
  • 如果你只想使用 JavaScript,那为什么要使用 php 标签?

标签: php jquery thumbnails screenshot


【解决方案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

            【讨论】:

              猜你喜欢
              • 1970-01-01
              • 2016-03-03
              • 2016-06-06
              • 2010-11-14
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 2013-08-16
              相关资源
              最近更新 更多