現在、Chromeブラウザの上位バージョンのみが直接貼り付けをサポートしています。他のブラウザはこれまでのところ貼り付けることができません。ただし、FirefoxおよびIE11ブラウザが撮影した画像は、編集可能なDivでスクリーンショットを貼り付けることができます。また、ChromeはClipboardDataを使用します。ただし、FirefoxおよびIE11ブラウザーでは、ClipboardDataを使用して画像のBase64データを直接取得することはできません。独自の直接IMGデータが付属しています。
完全な例：
<！doctype html> <html lang = "en-us"> <head> <meta charset = "utf-8"> <title> clipboarddataを使用して、webページにスクリーンショットと貼り付け関数を実装します</title> <style type = "text/css"> .box {width：500px;高さ：300px;境界線：1px solid #ddd; } .box img {max-width：480px; Max-Height：100％; TEXT-ALIGN：center;} </style> </head> <body> <div contentedable = "true" id = "testinput"> </div> <script type = "text/javascript">（function（）{var imgreader = function（item）{blob = item.getasfile（）、reader = new filereader（）; new filereader（）; new filereader（）; new filereader（）; img.target.log（img）。 //window.clipboarddata.getData("Text "）e.clipboardData.getData（" Text/Plain "）Firefoxの下で貼り付けられたコンテンツをGoogle ///Alert（clipboarddata.getData.getdata（" text/plain "））var clipboarddata = e.clipboarddata = e.clipboarddata = 0; console.log（console.log（ '1'）if = console.log（2）return（3）項目= clipboarddata.types | | == 'files'）{item = break; item seatm.type.match（/^image /// i）{imgreader（item）}、false）; </script> </script> </body> </html>例2：
<！doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> document> document> document> </head> <body> <body> <div id = "div" contentedable = "true"> </div> <script> var div = document.getelementbyid（ 'div'）; div.AddeventListener（ 'Paste'、function（e）{if（e.clipboarddata）{for（var i = 0; i <e.clipboarddata.items.length; i ++）{var c = e.clipboarddata.items [i]; var f = c.getaser（ div.innerhtml + = '<img src = "' + e.target.result + '">'} readasdataurl（f）}）; </script> </body> </html>実装方法：
方法1： Chromeブラウザでは、ClipboardDataを介してスクリーンショット画像データを直接取得できます。 AJAXを使用してデータを背景に渡し、背景開発によってドメイン名で画像アドレスを返すことができます。
方法2： Firefoxなどのブラウザで画像データを直接取得できないため、貼り付けたときにbase64 URLデータとしてDIVのIMGデータを取得し、AJAXを同じ方法として使用できます。
方法3：メッセージの公開または保存をクリックすると、DIVのIMGのデータをBase64 URLデータとして取得し、同時にAJAXを使用できます。複数の写真、ループ、または保存と公開をクリックすると、バックエンド開発プロセスが実行され、返されたディスプレイ情報が直接処理されます。このようにして、Divのバックエンドによって返されたドメイン名にbase64 URLをアドレスに置き換える必要はありません。
方法4： DIVに貼り付けると、ポップアップレイヤーがポップアップし、ポップアップレイヤーにスクリーンショットを備えた画像のプレビューがアップロードボタンを確認できます。 [アップロード]ボタンをクリックしてAjaxに移動して、同じ方法と同じ方法で画像をアップロードします