Safari ClipboardEvent.clipboardData vérifier si l'image a été collée

Question

Je dois ajouter un comportement supplémentaire lorsque l'utilisateur colle l'image dans Safari mobile. Je utiliser le code ci-dessous pour obtenir clipboardData:

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

De ce point, comment puis-je vérifier est-il l'image (jpg, png, gif) ont été collés ou non?

Answer 1

Je ne peux pas obtenir de données de e.clipboardData car il a montré noter du tout. donc j'utilise div modifiable à la place, alors vous pouvez vérifier s'il s'agit d'une image dans div divisible, et de trouver ce qu'il y a dedans.

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>

quand vous obtenez data-url vous pouvez ou tel jpgpng, sinon ce sera plus compliqué, un arrière-plan api est nécessaire