Geekly Articles each Day

HTML5デスクトップなしのスクリーンショット

ほぼ毎日Gmailを使用していますが、最近、画面のスクリーンショット（ www.take-a-screenshot.org ）を撮影し 、Ctrl + Vを押すだけで、このスクリーンショットをGmailメッセージのテキストに直接コピーできることに気付きました。 どこでも動作しますが、当然IEを除きます。 Stackoverflowの次の投稿で、これがどのように発生するかという質問に興味があります 。 clipboardDataは、HTML5のパワーに感銘を受け、デスクトップアプリケーションをコピーするだけで、コピーするだけでスクリーンショットをダウンロードできるシンプルなポータルを作成することにしました。


ブラウザのサポート


まず、バッファから何かをコピーするために（スクリーンショットなど）、ブラウザがClipboard APIをサポートしている必要があることに注意してください。 caniuseでわかるように、このAPIで動作するのは最新のブラウザーのみです。 IEは、残念ながら、部分的なサポートにもかかわらず、傍観者の立場で喫煙します。

スクリーンショットをJavaScriptにアップロードする


バッファーからイメージをロードするには（スクリーンショット）、まず貼り付けイベントハンドラーを定義する必要があります。
document.body.addEventListener("paste", function(e) { ... });


ハンドラーは、たとえばCtrl + Vを押すなど、ブラウザーウィンドウの作業領域で「挿入」イベントが発生したときに常に呼び出されます。次に、実際にバッファーから画像ファイルを受け取るコードを決定する必要があります。 このコードは、ChromeブラウザーとOperaブラウザーで同一ですが、FireFoxでは異なるため、後者はセキュリティ上の理由でclipboardDataオブジェクトメソッドを閉じています。

Chrome、Opera

 // e.clipboardData.items -         for (var i = 0; i < e.clipboardData.items.length; i++) { //    if (e.clipboardData.items[i].kind == "file" && e.clipboardData.items[i].type == "image/png") { //    Blob ( ) var imageFile = e.clipboardData.items[i].getAsFile(); var fileReader = new FileReader(); fileReader.onloadend = function(e) { //    this.result  Base64  loadImg(this.result); }; //  Blob  DataURL (Base64   ) fileReader.readAsDataURL(imageFile); e.preventDefault(); break; } }


Firefox

FireFoxでは、clipboardDataを介してファイルを読み取る機能はありません。 貼り付けられると、ブラウザーは、srcをDataURLの形式で<img>タグを作成します。 したがって、「松葉杖」を作成する必要があります。
 //   js,   Mozilla,   ,  (contenteditable) div  //    . if ($.browser.mozilla) { $(document.body).prepend('<div id="temp" contenteditable="true" style="height:1px;width:1px;color:#FFFFFF;"></div>'); $('#temp').focus(); } //   "" document.body.addEventListener("paste", function(e) { if ($.browser.mozilla) { //  Mozilla,      div // (   ,  FireFox  img   ) $('#temp').focus(); //   img (   2, 3, ..., N ) $('#temp img').remove(); //  FireFox   img  callback-     img -    setTimeout(function() { //   FireFox   img  temp div,     DataURL    loadImg($('#temp img').attr('src')); }, 1); return true; } });


写真をアップロードする場所は？


画像をサーバーに直接アップロードし、POST DataURL経由で転送するか、 画面で行われたようにキャンバスに転送できます 。
 var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ... function loadImg(dataURL) { var imageObj = new Image(); imageObj.onload = function() { var width = this.width, height = this.height; canvas.width = width; canvas.height = height; ctx.drawImage(this, 0, 0, width, height); }; imageObj.src = dataURL; }


Canvasは、スクリーンショットをサーバーにアップロードする前に、下線、描画、円、切り取りなどを編集できるので便利です。

サーバーで何が起こっていますか？


サーバーには、Base64（DataURL）形式の本文を受け入れ、それをpngなどのバイナリイメージファイルにデコードするPOSTコントローラーが必要です。 コントローラは、SpringMVCを使用するJavaなど、任意の言語で作成できます。
 @RequestMapping(value = "/upload", method = RequestMethod.POST) public @ResponseBody String save(@RequestBody String b64) { File file = null; FileOutputStream out = null; try { //  Output  out = new FileOutputStream("/opt/files/somename.png"); //  Base64       out.write(Base64.decodeBase64(StringUtils.replace(b64, "data:image/png;base64,", ""))); //   IOUtils.closeQuietly(out); } catch (FileNotFoundException e) { e.printStackTrace(); } catch (IOException e) { e.printStackTrace(); } return file.getName(); }


念のため、このStringUtils.replace（b64、 "data：image / png; base64、"、 ""）構造は、Javascriptから送信されるDataURLを正規化するために必要であることに注意してください。 実際には、DataURLを作成すると、そのタイプと形式が最初に設定され、次にBase64表現になります。たとえば、データ：image / png; base64、iVBORw0KGgoAAAANSUhEUgAABVYAAAMAC ...

さらに、ファイルサイズを確認し、特定の最大サイズを超えた場合は、jpgで圧縮することもできます。

ユースケース


Cackleでは、お客様のスクリーンショットをすばやく簡単に撮影する方法として、毎日スクリーンサービスを使用しています。 残念ながら、このようなソリューションはネットワーク上にほとんどなく、不便であるか、デスクトップ経由でしか機能しません。


近い将来、このすべての機能をオンラインコンサルタントCackleに移行する予定です。 したがって、顧客はスクリーンショットを撮り、コンサルタントを通じてオペレーターに画像を直接転送する機会があります。 これはある意味で、ブラウザだけでなく画面全体を表示し、開発コストを削減し、エラーを最小限に抑えることができるため、Co-Browserの最適な代替品です。

結論として、 あなたのスクリーンプロジェクトは完全に新しいものであり、今後も発展し続けると思いますので、機能に関するあなたの批判と提案を待っています。

Source: https://habr.com/ru/post/J201190/

More articles:


All Articles