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中獲取數據，因爲它顯示了所有數據。所以我使用Editable div來代替，然後您可以檢查它是否是可編輯div內的圖像，並查找其中的內容。

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>

當你data-url你可以電話jpg或png，如果不是會更加複雜，需要後端API