如何用PHP取得网站页面快照或者截图并保存到文件的API接口?

  • 3
  • 8,582人读过
  • A+
所属分类:稀奇古怪
截图

最近树懒先生在折腾API,开始的时候想要制作一个ICO网站图标获取的接口,但是百度到了很多方法都是直接调用网站指定文件或者干脆利用Google的开放API达到目的,很是扫兴。昨天树懒先生突发奇想,记得在WordPress评论后台曾经看到过鼠标移动到网址可以显示出该网站的截图,很是感兴趣,便开始了新一轮的“入坑之路”。

最初的思路当然是直接截图了,因为经常使用QQ截图的缘故,所以第一个蹦出来的就是这种方法,而实际上这种方法是可行的,不过需要Windows服务器来支持不过相当麻烦,所以没有可执行性。

第二条思路是利用PHP来实现,可是百度发现竟然还有HTML的解决方案,果断尝试一下!发现效果还是很不错的,原理是将Html利用canvas转换,得到截图,效果如下:

如何用PHP取得网站页面快照或者截图并保存到文件的API接口?

代码已经折叠:

展开


HTML部分(保存为index.html)

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.   <title>Html2canvas</title>
  8.   <script src="js/jquery-1.11.3.min.js"></script>
  9.   <script src="js/html2canvas.min.js"></script>
  10.   <style>
  11.     body {
  12.       margin: 0;
  13.       padding: 0;
  14.       position: relative;
  15.     }
  16.     .top {
  17.       width: 100%;
  18.       height: 600px;
  19.       line-height: 600px;
  20.       background: yellow;
  21.       text-align: center;
  22.       font-size: 48px;
  23.     }
  24.     .bottom {
  25.       width: 100%;
  26.       height: 200px;
  27.       line-height: 200px;
  28.       background: green;
  29.       text-align: center;
  30.       color: white;
  31.     }
  32.     .fixed-btn {
  33.       width: 50px;
  34.       height: 50px;
  35.       border-radius: 50%;
  36.       background: white;
  37.       border: none;
  38.       text-align: center;
  39.       position: fixed;
  40.       right: 10px;
  41.       bottom: 50px;
  42.       outline: none;
  43.       z-index: 10;
  44.     }
  45.     .modal {
  46.       background: rgba(0, 0, 0, 0.5);
  47.       position: fixed;
  48.       z-index: 100;
  49.       top: 0;
  50.       right: 0;
  51.       bottom: 0;
  52.       left: 0;
  53.       display: none;
  54.     }
  55.     .capture-img {
  56.       position: absolute;
  57.       top: 0;
  58.       z-index: 1000;
  59.       padding: 30px;
  60.       width: 100%;
  61.       box-sizing: border-box;
  62.       display: none;
  63.     }
  64.   </style>
  65. </head>
  66. <body>
  67.   <div id="capture">
  68.     <div class="top">
  69.         树懒先生的博客
  70.     </div>
  71.     <div class="bottom">
  72.         WWW.MECRR.COM
  73.     </div>
  74.     <button onclick="captureImg()" class="fixed-btn">截图</button>
  75.     <div class="modal"></div>
  76.     <img class="capture-img">
  77.   </div>
  78.   <script>
  79.     function captureImg() {
  80.       $('.fixed-btn').css('display', 'none');
  81.       html2canvas($("#capture")[0]).then(canvas => {
  82.         var imgUria = canvas.toDataURL("image/png");
  83.         $(".content").css('display', 'block');
  84.         $(".modal").css({'display': 'block', 'z-index': 100});
  85.         $('.capture-img').attr('src', imgUria).css({'display': 'block', 'z-index': 1000});
  86.       });
  87.     }
  88.   </script>
  89. </body>
  90. </html>

JS部分则是调用了html2canvas.min.js和jquery-1.11.3.min.js两个文件,由于文件太大就不贴出代码了。有兴趣的话可以看一下这个地址html2canvas。

既然得到了这种思路,那么HTML就可以直接转换JPG和PNG以及PDF了,继续研究,发现前人已经开拓出了一条道路,wkhtmltopdf是一个免费开源的程序,需要安装在服务器上支持Windows、Linux、macOS,之前好像是和Google有合作的wkhtmltopdf。不过实际使用还是很麻烦的,除非利用SSH2和PHP远程执行代码,否则还是有一定局限性的。

如何用PHP取得网站页面快照或者截图并保存到文件的API接口?

树懒先生继续折腾发现,如果服务端是Windows的话,还是很容易就能解决的,一下代码只能用在Windows并且PHP版本>5.2.

  1. <?php
  2. $img = imagegrabscreen();
  3. imagepng($img, 'screenshot.png');
  4. ?>
  5. <?php
  6. $Browser = new COM('InternetExplorer.Application');
  7. $Browserhandle = $Browser->HWND;
  8. $Browser->Visible = true;
  9. $Browser->Fullscreen = true;
  10. $Browser->Navigate('https://www.mecrr.com');
  11. while($Browser->Busy){
  12.   com_message_pump(4000);
  13. }
  14. $img = imagegrabwindow($Browserhandle, 0);
  15. $Browser->Quit();
  16. imagepng($img, 'screenshot.png');
  17. ?>

迫不得已便是调用第三方的服务,一款国外的Grabzlt提供免费的API,并且无需写代码,官方已经封装好了代码只需要下载和上传即可开始使用。不过树懒先生在实际的本地环境测试时候发现,这玩意不出意料的被墙了,看来我国的长城防火墙还真是蛮厉害的。如何用PHP取得网站页面快照或者截图并保存到文件的API接口?

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:3   其中:访客  2   博主  1

    • 杨小杰博客 杨小杰博客 1

      sublime表示不服,还可以安装扩展插件

      • 天津网站建设 天津网站建设 0

        很有用,感谢分享