ホームページ > 記事 > ウェブフロントエンド > JavaScriptでWebページにクリップボードを読み取ってスクリーンショットを貼り付ける機能を実装_javascriptスキル
JavaScriptでWebページにクリップボードを読み取ってスクリーンショットを貼り付ける機能を実装_javascriptスキル
- WBOYオリジナル
- 2016-05-16 16:45:381951ブラウズ
ウェブサイトの入力ボックスがスクリーンショットを撮って貼り付ける機能をサポートしているのを見て、面白いと思ったのでコードを取り出して共有しました。
残念ながら、現在、この方法での直接貼り付けをサポートしているのは Chrome ブラウザの上位バージョンのみであり、他のブラウザでは貼り付けができません (IE11 はまだテストされていません)。もちろん、この強化されたユーザー エクスペリエンス機能は何もしないよりは優れています。
入力ボックスの構造コード:
貼り付けイベントを入力ボックスにバインドします:
var input = document.getElementById( 'testInput ');
input.addEventListener( 'paste', function(event ){
// 何かをします...
});
ペースト イベントの Event インターフェイス オブジェクトは、システム クリップボードにデータを保存する ClipboardData インターフェイスを提供します。現在、システム クリップボード内のデータに直接アクセスできるのは、上位バージョンの Chrome ブラウザのみです。これにより、スクリーンショットを撮って画像をクリップボードに保存した後、Web ページと直接対話するための入り口が提供されます。
ここで説明するスクリーンショットは、QQ が提供するスクリーンショット、システムに付属の PrtScn キーのスクリーンショット機能、または他のサードパーティ ソフトウェアが提供するスクリーンショット機能を指します。
input.addEventListener( 'paste', function (event) {
// システムのクリップボードにアクセスするためにイベント オブジェクトに追加されたインターフェイス
var ClipboardData =event.clipboardData,
i = 0,
items, item, tables;
if(clipboardData){
items = ClipboardData.items;
if( !items ){
return;
}
item = items[0];
//クリップボードに保存されているデータ型i] === 'ファイル'）{
item = it> if（item && item.kind === 'file' && itep.type .match(/^image//i) ){
🎜> }
});
クリップボードから画像データを取得したら、FileReader を使用してそれを読み取ることができます。
コードをコピー
コードは次のとおりです。
var file = item.getAsFile(),
Reader = new FileReader();Reader.readAsDataURL( file );
};
非常に短いコードで実装できます。次のソース コードを使用してデモを確認できます。
コードをコピー
コードは次のとおりです:
< ;title>clipboardData を使用して Web ページにスクリーンショットと貼り付けの機能を実装します