Safari ClipboardEvent.clipboardData貼り付けた画像を確認する

Question

モバイルSafariに画像を貼り付けるときに、追加の動作を追加する必要があります。私はclipboardData取得するには、次のコードを使用し ：この時点から

document.getElementById('content').addEventListener('paste', function(e) { 
    var clipboardData = e.clipboardData; 
// check if image were pasted 
} 

を、どのように私がチェックすることができ、それは、画像（JPG、PNG、GIF）を貼り付けたりされませんでしたか？

Answer 1

e.clipboardDataからデータを取得することはできません。編集可能なdivを代わりに使用して、編集可能なdiv内の画像であるかどうかを確認し、その中にあるものを見つけることができます。あなたはそれがより複雑になりますない場合は、TEL jpgまたはpngできdata-urlを取得するとき

document.getElementById("content").addEventListener("paste", function(e) { 
 
    setTimeout(() => { 
 
    var pasted = $("#content").children(); 
 
    if (!pasted.length) { 
 
     console.log("nothing pasted!"); 
 
     return; 
 
    } 
 
    pasted.map((i, x) => { 
 
     if (x.tagName != "IMG") { 
 
     console.log(x); 
 
     console.log(`${x.tagName} not image`); 
 
     return; 
 
     } 
 
     console.log(`pasted image=[${x.src}]!`); 
 
    }); 
 
    }); 
 
});

#content { 
 
    width: 200px; 
 
    height: 200px; 
 
    border: 1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='content' contenteditable='true'></div>

は、バックエンドのAPIが必要とされている