特定のWebサイトの入力ボックスがスクリーンショットと貼り付け機能をサポートしていることがわかりました。面白いと感じたので、コードを掘り下げて共有しました。
残念ながら、Chromeブラウザの上位バージョンのみが直接貼り付けをサポートしており、他のブラウザはこれまで貼り付けることができませんでした(IE11はテストされていません)。もちろん、この強化されたユーザーエクスペリエンス関数は、誰よりも優れています。
入力ボックスの構造コード:
コードコピーは次のとおりです。
<入力型= "text" id = "testinput" />
入力ボックスの貼り付けイベントをバインドします:
コードコピーは次のとおりです。
var input = document.getElementById( 'testinput');
input.addeventlistener( 'paste'、function(event){
// DOSOMTHING ...
});
イベントを貼り付けるためのイベントインターフェイスオブジェクトは、システムクリップボードにデータを保存するClipboardDataインターフェイスを提供します。上記のように、Chromeブラウザの高等バージョンのみがシステムクリップボードのデータに直接アクセスできます。これにより、クリップボードに保存された写真の入り口があり、スクリーンショットの後にWebページで直接やり取りします。
ここで説明したスクリーンショットは、QQで提供されるスクリーンショット、またはシステムが提供するPRTSCNキーのスクリーンショット関数、または他のサードパーティソフトウェアによって提供されるスクリーンショット機能です。
コードコピーは次のとおりです。
input.addeventlistener( 'paste'、function(event){
//イベントオブジェクトに追加されたシステムクリップボードにアクセスするインターフェイス
var ClipboardData = event.clipboarddata、
i = 0、
アイテム、アイテム、タイプ。
if(clipboarddata){
items = clipboarddata.items;
if(!items){
戻る;
}
item = item [0];
//クリップボードに保存されているデータ型
型= clipboarddata.types || [];
for(; i <types.length; i ++){
if(types [i] === 'files'){
item = item [i];
壊す;
}
}
//画像データかどうかを判断します
if(item && item.kind === 'file' && itep.type.match(/^image /// i)){
//写真を読んでください
imgreader(item);
}
}
});
クリップボードから画像データを取得した後、FileReaderを使用して読むことができます。
コードコピーは次のとおりです。
var imgreader = function(item){
var file = item.getasfile()、
reader = new fileReader();
//ファイルを読んだ後、それはWebページに表示されます
reader.onload = function(e){
var img = new Image();
img.src = e.target.result;
document.body.AppendChild(IMG);
};
//ファイルを読み取ります
reader.readasdataurl(file);
};
非常に短いコードが実装されています。次のソースコードを使用してデモンストレーションを確認できます。
コードコピーは次のとおりです。
<!doctype html>
<html lang = "en-us">
<head>
<メタcharset = "utf-8">
<Title> ClipboardDataを使用してスクリーンショットとWebページに機能を貼り付けます</title>
<style type = "text/css">
#box {width:200px;高さ:200px;境界線:1px solid #ddd; }
</style>
</head>
<body>
<h1> clipboarddataを使用してスクリーンショットと貼り付け機能をWebページに貼り付けます</h1>
<hr />
<div> <入力タイプ= "テキスト" id = "testinput" placeholder = "screenshot" size = "30" /> < /div>の後の入力ボックスに貼り付け
<script type = "text/javascript">
(関数(){
var imgreader = function(item){
var blob = item.getasfile()、
reader = new fileReader();
reader.onload = function(e){
var img = new Image();
img.src = e.target.result;
document.body.AppendChild(IMG);
};
reader.readasdataurl(blob);
};
document.getElementById( 'testinput').addeventlistener( 'paste'、function(e){
var clipboarddata = e.clipboarddata、
i = 0、
アイテム、アイテム、タイプ。
if(clipboarddata){
items = clipboarddata.items;
if(!items){
戻る;
}
item = item [0];
型= clipboarddata.types || [];
for(; i <types.length; i ++){
if(types [i] === 'files'){
item = item [i];
壊す;
}
}
if(item && item.kind === 'file' && itep.type.match(/^image /// i)){
imgreader(item);
}
}
});
})();
</script>
</body>
</html>