js melaksanakan ctrl+v untuk menampal dan memuat naik gambar (serasi dengan chrome, firefox, ie11)_kemahiran javascript

Kami semua telah menggunakan pelbagai editor teks yang kaya dengan lebih kurang. Terdapat fungsi yang sangat mudah di antara mereka dilaksanakan?

Analisis Prinsip
Kendalian pengekstrakan: copy=>paste=>muat naik
Semasa operasi ini, apa yang perlu kita lakukan ialah: mendengar acara tampal => dapatkan kandungan dalam papan keratan => Untuk memahami perkara berikut dengan mudah, anda perlu memahami beberapa perkara dahulu:

• Kami hanya boleh memuat naik gambar halaman web (klik kanan gambar pada halaman web, dan kemudian salin) dan tangkapan skrin (gambar yang diambil oleh alat tangkapan skrin, cth: tangkapan skrin qq Kami tidak boleh menampal dan memuat naik gambar dalam sistem (dari desktop pada komputer, disalin ke cakera keras), mereka wujud di tempat yang sama sekali berbeza.
• Gambar yang ditangkap oleh alat snipping agak berbeza daripada gambar yang disalin dengan mengklik kanan pada halaman web, jadi kaedah pemprosesan juga berbeza.
• Berhati-hati dengan acara tampal: Apabila anda melakukan operasi tampal (klik kanan tampal/ctrl+v), tindakan ini akan mencetuskan acara papan keratan bernama 'tampal' Acara ini dicetuskan apabila memotong Data dalam papan dimasukkan sebelum elemen sasaran. Jika elemen sasaran (di mana kursor terletak) ialah elemen boleh edit (cth: div dengan set atribut boleh diedit kandungan. Textarea tidak berfungsi.), tindakan tampal akan memasukkan data dalam papan keratan ke dalam elemen sasaran paling banyak. format yang sesuai ; Jika elemen sasaran tidak boleh diedit, data tidak akan dimasukkan, tetapi acara tampal masih akan dicetuskan. Data adalah baca sahaja semasa proses menampal. Perenggan ini diterjemahkan daripada w3.org_the-paste-action.
• Malangnya, selepas ujian, didapati pelaksanaan tampal acara dalam chrome (versi terkini), firefox (versi terkini), dan ie11 tidak sepenuhnya mengikut w3c, dan setiap mempunyai perbezaan tersendiri (w3c Oleh itu, piawaian tampal hanya dalam peringkat draf).
  

Kod ujian dan tangkapan skrin adalah seperti berikut:

krom:

<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)

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