Webリソースのフルサイズのスクリーンショットを作成する

かなり有用なサービスは、Webリソースのフルサイズのスクリーンショットの作成です。

このサービスはわずか5分で実現します。



タスク:



1)サイトのフルサイズのスクリーンショットを作成します(長さと幅がフルスクリーンショットであり、ブラウザーウィンドウをキャプチャしません)

2)Webインターフェース



テクノロジー:



-OS-Ubuntu 10.04

-xvfb-仮想フレームバッファー(Fake Xserver)

-CutyCapt-Webページをレンダリングするためのクロスプラットフォームユーティリティ

-php-Webインターフェイス用





実装:





-ソフトウェアのインストール




1. xvfbをインストールします


aptitude install xvfb



2. CutyCaptのインストール




2.1最初に、Subversionをインストールします。


aptitude install subversion libqt4-webkit libqt4-dev g ++



2.2 SVNをインストールした後、CutyCaptのディレクトリを作成し、ソースをダウンロードします。


mkdir / usr / ccapt

cd / usr / ccapt

svn co cutycapt.svn.sourceforge.net/svnroot/cutycapt



次に、アセンブリに進みます。


cd cutycapt / cututy

qmake

作る



コンソールで作業を確認します


xvfb-run --server-args = "-screen 0、1024x768x24" / usr / ccapt / cutycapt / CutyCapt / CutyCapt --url = http://habrahabr.ru --out = / var / www / images / habrahabr_ru。 jpg



-Webインターフェース




3.1スクリーンショットを作成する簡単なphpスクリプトを作成します




<? //    $path = '/var/www/images/'; // URL       $web = 'http://kih.kz/images/'; function screenshot($source,$filename) { system('xvfb-run --server-args="-screen 0, 1024x768x24" /usr/ccapt/cutycapt/CutyCapt/CutyCapt --url=http://'.$source.' --out=/var/www/images/'.$filename); } if(!isset($_POST['url'])) { print '<html>'. '<head>'. '<title>  </title>'. '</head>'. '<body>'; print '<form action="" method="post">'. 'URL:<br />'. '<input name="url" type="text" value="http://">'. '<input type="submit" value="Send">'. '</form>'; print '</body>'. '</html>'; } else { //      .   url  host $site = parse_url($_POST['url']); //          $filename = str_ireplace('.','_',$site["host"]).'.jpg'; //     if(file_exists($path.$filename)) { //     -    if (system('find '.$path.' -type f -name '.$filename.' -mtime -1')) { print ',          !<br />'; print '<a href="'.$web.$filename.'">'.$web.$filename.'</a>'; } else { screenshot($site["host"],$filename); print '<a href="'.$web.$filename.'">'.$web.$filename.'</a>'; } } else { screenshot($site["host"],$filename); print '<a href="'.$web.$filename.'">'.$web.$filename.'</a>'; } } ?>
      
      







結論:



このようなかなり簡単な方法で、ブラウザウィンドウのサイズに合わせてトリミングするのではなく、Flashを使用してサイトのスクリーンショットを完全に取得し、フルサイズのスクリーンショットを作成する便利なサイトスクリーンショットを得ました。



例:



この記事で実行されるすべてのアクションは、 ここで実装されます

一時的に利用できません。



ご清聴ありがとうございました。



UPD:

スクリーンショットの作成自体は非常にリソースを消費し、スクリーンショットを撮るにはかなりの時間がかかります。 (当然、要求されたサイトのチャネルに依存します)。

この例は弱いVDS上にあり、負荷に耐えられない場合があります。

したがって、例を使用できない場合でも文句を言わないでください。



UPD2:

残念ながら、私の弱いVDSはこのような負荷を処理しないため、おそらくこの例は利用できません。



All Articles