JavaScriptでクリップボードを扱う

JavaScript でのクリップボードの処理方法をまとめていきます。


各ブラウザの対応状況を調べないと

クリップボードからアイテムを取得する

対応イベント(多分 paste 的なイベント)の引数のイベントオブジェクトから、clipboardData を取得します。clipboardData DataTransfer 型のオブジェクトです。

プレーンテキストを取得

clipboardData の getData メソッドで、"text/plain" を渡して取得します。クリップボードに text/plain 形式が含まれていない場合、空文字が返るようです。

画像を取得

clipboardData のアイテム(items の要素)から、

getAsFile
メソッドを呼び出し、File オブジェクトを取得します。

あとは、File API を使って諸々処理をします。
例えば、DataUrl (img タグの src に設定できるやつ)の取得は以下のような感じです。処理は非同期になるので注意です。