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

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

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

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

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

//イベントオブジェクトからクリップボードのデータを取得
var clipboardData = e.clipboardData;
for(var i = 0; i < clipboardData.items.length; i++)
{
	var item = clipboardData.items[i];
	//アイテムのタイプ（text/plainとかimage/pngとか）を表示
	console.log(item.type);
}

プレーンテキストを取得

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

var plainText = clipboardData.getData("text/plain");

画像を取得

clipboardData のアイテム（items の要素）から、

getAsFile

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

// imageItem は、e.clipboardData.items の要素で、type が "image/png" 等を想定
var file = imageItem.getAsFile();

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

var file = imageItem.getAsFile();

//FileReaderで読み込み
var reader = new FileReader();
reader.onload = function () {
    var dataUrl = reader.result;
	//dataUrlの表示
    console.log(dataUrl);
};
reader.readAsDataURL(file);

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

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

プレーンテキストを取得

画像を取得

目次

アウトライン