JavaScriptを介したスクリーンショットに関する考察

1つのサービスを開発するとき、ユーザーがエラーを報告できるようにする必要がありました。 問題は、ユーザーがサードパーティのソフトウェアやサービスを使用せずにスクリーンショットを撮ることができることでした。

最初、このタスクは私には不可能に思えましたが、html2canvasを見つけました。


ダウンロードし、例を参照し、こちらで詳細をご覧ください。 要するに、これはcanvas要素のページのスクリーンショットを作成でき、jqueryプラグインとして設計されています。

たとえば、何かクリックするとハングします。

$(document).ready(function() { $('#megaButton').live('click',function(){ //   html2canvas $('body').html2canvas(); setTimeout("makeIT()", 1000) }); }); function makeIT() { //     canvas,   : var canvas = $('canvas')[0]; //   base64 var data = canvas.toDataURL('image/png').replace(/data:image\/png;base64,/, ''); //     canvas $('canvas').remove(); //    $.post('saveCPic.php',{data:data}, function(rep){ alert(' '+rep+' ' ); }); } 

saveCPic.phpでは、すべてが簡単です：

 <?php // - , , : $name = time().'.png'; //,     base64 file_put_contents($name, base64_decode($_POST['data'] )); //     echo( $name ); ?> 

サーバーをクリックしてこれらの簡単な操作を行った結果、現在のページのスクリーンショットを含むファイルが作成されます。

この記事は、あらゆる問題のグローバルな解決策のふりをしているわけではありませんが、誰かを興味深い考えに導き、問題を解決する可能性があります。