效果
比如我截图我的 csdn 的信息
然后粘贴到区域里，就能预览这个图片
代码实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>截图粘贴预览图片</title> <style> div.preview-img { border: 2px solid #ddd; margin: .5rem; padding: .5rem; min-height: 30rem; border-radius: 10px; background-color: #fff; } </style> </head> <body> <h1 style="text-align: center;">kaimo 测试截图粘贴预览图片功能，请在下面容器进行粘贴</h1> <div class="preview-img"></div> <script> // 监听粘贴事件 const target = document.querySelector("div.preview-img"); target.addEventListener("paste", (event) => { event.preventDefault(); let paste = event.clipboardData || window.clipboardData; // 找到图片文件file if(paste.files && paste.files.length > 0 && paste.files[0].type === "image/png") { let fr = new FileReader(); // 读取 file 然后返回 data:URL 格式的字符串（base64 编码）以表示所读取文件的内容。 fr.readAsDataURL(paste.files[0]); fr.onload = function(e) { let img = document.createElement("img"); img.src = e.target.result; target.innerHTML = ""; target.appendChild(img); } }else{ alert("请截图粘贴"); } }); </script> </body> </html>
参考资料
FileReader.readAsDataURL()
readAsDataURL 方法会读取指定的 Blob 或 File 对象。读取操作完成的时候，readyState 会变成已完成DONE，并触发 loadend (en-US) 事件，同时 result 属性将包含一个data:URL 格式的字符串（base64 编码）以表示所读取文件的内容。
Element: paste 事件
当用户在浏览器用户界面发起“粘贴”操作时，会触发 paste 事件。
