原生 js 实现截图粘贴预览图片功能
Posted 凯小默
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生 js 实现截图粘贴预览图片功能相关的知识，希望对你有一定的参考价值。
效果
比如我截图我的 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>
参考资料
readAsDataURL 方法会读取指定的 Blob 或 File 对象。读取操作完成的时候，readyState 会变成已完成DONE，并触发 loadend (en-US) 事件，同时 result 属性将包含一个data:URL 格式的字符串（base64 编码）以表示所读取文件的内容。
当用户在浏览器用户界面发起“粘贴”操作时，会触发 paste 事件。
以上是关于原生 js 实现截图粘贴预览图片功能的主要内容，如果未能解决你的问题，请参考以下文章