js implémente ctrl+v pour coller et télécharger des images (compatible avec chrome, firefox, ie11)_compétences javascript

Nous avons tous utilisé plus ou moins divers éditeurs de texte enrichi. Parmi eux, il existe une fonction très pratique : copiez une image et collez-la dans la zone de texte, et l'image sera téléchargée. C'est donc pratique. mis en œuvre ?

Analyse des principes
Opération d'extraction : copier=>coller=>upload
Lors de cette opération, il suffit de : écouter l'événement coller => récupérer le contenu dans le presse-papier => envoyer une demande de téléchargement
Afin de comprendre facilement ce qui suit, vous devez d'abord comprendre quelques points :

• Nous pouvons uniquement télécharger des images de page Web (cliquez avec le bouton droit sur l'image sur la page Web, puis copiez) et des captures d'écran (images prises par l'outil de capture d'écran, par exemple : capture d'écran qq). images dans le système (du bureau de l'ordinateur, copiées sur le disque dur), elles existent à des endroits complètement différents.
• L'image capturée par l'outil de capture est quelque peu différente de l'image copiée en cliquant avec le bouton droit sur la page Web, donc les méthodes de traitement sont également différentes.
• Soyez conscient de l'événement coller : lorsque vous effectuez une opération de collage (clic droit sur coller/ctrl+v), cette action déclenchera un événement du presse-papiers nommé "coller". Cet événement est déclenché lorsque. découpage Les données dans le tableau sont insérées avant l'élément cible. Si l'élément cible (où se trouve le curseur) est un élément modifiable (par exemple : un div avec l'attribut contenteditable défini. Textarea ne fonctionne pas.), l'action Coller insérera les données du presse-papiers dans l'élément cible au maximum. format approprié. Si l'élément cible n'est pas modifiable, les données ne seront pas insérées, mais l'événement coller sera quand même déclenché. Les données sont en lecture seule pendant le processus de collage. Ce paragraphe est traduit de w3.org_the-paste-action.
• Malheureusement, après tests, il a été constaté que l'implémentation des événements coller dans Chrome (la dernière version), Firefox (la dernière version) et ie11 n'est pas entièrement conforme au w3c, et chacun a ses propres différences (w3c La norme de pâte n'est donc qu'au stade de projet).
  

Le code de test et les captures d'écran sont les suivants :

chrome :

<textarea ></textarea> 
<div contenteditable style="width: 100px;height: 100px; border:1px solid"> 
</div> 
<script> 
document.addEventListener('paste', function (event) { 
  console.log(event) 
})
</script>

1. event有clipboardData属性，且clipboardData有item属性，clipboardData.item中的元素（对象）有type和kind属性；
2. 无论在哪进行粘贴，均可触发paste事件；
3. 在div（未特殊声明时，本文div均指设置了contenteditable属性的div） 里粘贴截图，不显示图片。img.src为base64编码字符串；
4. 在div里粘贴网页图片，直接显示图片，img.src为图片地址。

firefox：

1. event有clipboardData属性，clipboardData没有item属性；
2. 只有在textarea里或者可编辑的div（里才粘贴才触发paste事件；
3. 在div里粘贴截图，直接显示图片，img.src为base64编码字符串；
4. 在div里粘贴网页图片，表现同chrome。
   

ie11：（不截图了，可自行试验，其他浏览器同理b4d92b8d0d10f967e1cabc607dfe08a0npm intall=>node app.js)

以上就是本文的全部内容，希望对大家的学习有所帮助。