原生 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>

参考资料

FileReader.readAsDataURL()

readAsDataURL 方法会读取指定的 Blob 或 File 对象。读取操作完成的时候，readyState 会变成已完成DONE，并触发 loadend (en-US) 事件，同时 result 属性将包含一个data:URL 格式的字符串（base64 编码）以表示所读取文件的内容。

Element: paste 事件

当用户在浏览器用户界面发起“粘贴”操作时，会触发 paste 事件。

相关阅读:
阿里巴巴中国站的图像识别革新：深入剖析按图搜索1688商品（拍立淘）API的应用与实践
精准防疫有“利器”| 芯讯通助力数字哨兵护航复市
c语言alpha-beta剪枝六子棋
Denoising diffusion implicit models 阅读笔记
记一次springboot项目结合arthas排查ClassNotFoundException问题
Error: 0x800701bc WSL 2 ?????????????????? https://aka.ms/wsl2kernel
手把手教你如何通过Java给图片添加文字和图片水印
C 标准库 - ＜stdio.h＞详解
手把手教你入门Three.js（初识篇）
Linux，计算机网络，数据库

原文地址：https://blog.csdn.net/kaimo313/article/details/127069016