JavaScript クリップボードの画像を取得する

ブログを書いているとブラウザで閲覧中のWebページ内の画像をコピーしてpngファイルなどにしてフォルダでファイル管理することが多いのですが、遅ればせながら画像をデータとしてコピーしてそのままブログに貼り付けてしまったほうが楽だと気づいたのでプログラム化しました。

▼まずはクリップボードから画像のデータUrlを取得。

結果ログ（長いので省略済み）

console.log("blob:",this.result)

ソースコード

// クリップボードから画像を取得し、コンソールに出力する
// window.addEventListener('paste', ... or
document.onpaste = function (event) {
	outoput2consoleImagaDataUrl(event)
}

function outoput2consoleImagaDataUrl(event){
	// use event.originalEvent.clipboard for newer chrome versions
	var items = (event.clipboardData || event.originalEvent.clipboardData).items;
	// console.log(JSON.stringify(items)); // will give you the mime types
	// find pasted image among pasted items
	var blob = null;
	for (var i = 0; i < items.length; i++) {
		if (items[i].type.indexOf("image") === 0) {
			blob = items[i].getAsFile();
		}
	}
	// load image if there is a pasted image
	if (blob !== null) {
		var reader = new FileReader();
		reader.onload = function (event) {
			console.log("blob:",this.result); // data url!
		};
		reader.readAsDataURL(blob);
	}
}

こちらのコードを参考にさせてもらいました。

スクショ（スクリーンショット）のデータでもWebページの画像上で[画像をコピー]を選択してコピーしたデータでも取得できました。