クリップボードに貼り付けた画像を取得する javascript

初投稿です。とりあえずメモ変わりに。
間違ってる所、改善点などあればどんどん突っ込んで下さい。

目的

画像ファイルの読み込み方法に、クリップボードから取得できれば便利だと思ったので調べてみた。

コード

div contentditable要素にコピーした画像を貼り付けてimg要素に表示する処理。

html

 <div id="box" contenteditable="true">画像ペーストエリア、</div>
 <img src="" alt="" id="image">

js

 var blob2=null;
$("#box").on("paste",function(e) {
  var items = (event.clipboardData || event.originalEvent.clipboardData).items;
for (var i = 0; i < items.length; i++) {//クリップボードに画像があるか探してる
  if (items[i].type.indexOf("image") === 0) {
    blob2 = items[i].getAsFile();
  }
}//for
if (blob2 !== null) {//方法１
//blob2に画像がある場合の処理画像url作成処理
    var blobURL = URL.createObjectURL(blob2);
    $("#image").attr("src",blobURL);
}else{//方法２ 
//boxへ貼り付けられた画像をdomで取得する方法 
  setTimeout(fn, 1000);//1秒待ってから実行する。
}
});
var fn = function() {
var p = document.querySelector("#box");
var pa = p.querySelector("img");
if (pa) {
test(pa.src);
}else{
//この方法でも取得できなければ失敗
alert("画像を取得できませんでした。");
} 
}

function test(pasrc) {//urlの形式判別、base64形式とhttp形式に別れる
if (pasrc.match(/^data:image/)) {
$("#image").attr("src",pasrc);
} else if (pasrc.match(/^http:\/\/|^https:\/\//)) {
  $("#image").attr("src",pasrc);
} 
}

説明

方法１はクリップボードから取り出すのでblobとして存在している。画像形式は全てPNGとなっている。（mac)の場合、他は未検証

方法２は、div contenteditable="true"を使いdiv要素に貼り付けられた画像を取得している。元のurlの状態で取得できる、「http」か「base64画像」に分別されると思う。

ほとんどの場合方法１で取得できた。ウェブ上でコピーできる画像ならなんでも対応できた。

検証したブラウザは safari chrome firefox　環境はmacです。

参考サイト

https://qiita.com/tatesuke/items/00de1c6be89bad2a6a72
https://www.vrtmrz.net/javascript/contenteditable-paste-image

デモ

一応デモ、ごちゃごちゃしてるかも
取り敢えず一応動くというのを確認する用
https://jsbin.com/cadajireli/1/edit?html,js,output

右上の　auto run jsにチェック入れて動かして下さい。