JS paste the display picture and read the picture

Mainly by binding the paste event to the div

div.addEventListener('paste', function(){})

Paste event core code

(最下面有完整代码)
const div = document.getElementById("div")

const img = document.getElementById("img")

div.addEventListener('paste', handlepaste)

function handlepaste(e) {
   // 粘贴对象
     if (e.clipboardData || e.originalEvent) {
         const clipboardData = (event.clipboardData || event.originalEvent.clipboardData);
         if (clipboardData.items) {
             let blob;
             for (let i = 0; i < clipboardData.items.length; i++) {
                 if (clipboardData.items[i].type.indexOf('image') !== -1) {
                     blob = clipboardData.items[i].getAsFile();
                 }
             }

             // 粘贴数据
             console.log(blob, 'blob')

             // 生成文件对象
             const filer = new FileReader()
             
             // 将获取的粘贴数据转成 URL格式的字符串（base64编码）
             filer.readAsDataURL(blob)
             
             // 这个回调在 filer.readAsDataURL(blob) 的时候触发
             filer.onload = (e) => {
                 console.log(e, 'FileReader')
                 // 获取URL格式的字符串 Base64编码
                 const base64 = e.target.result;
                 console.log(base64, 'base64')
                 // 通过img输出
                 img.src = base64
             };

         }
     }
 }

Complete code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .div {
        width: 500px;
        height: 500px;
        margin: 60px auto;
        background-color: pink;
    }
    .div2 {
        width: 400px;
        height: 400px;
        margin: 0 auto;
        background-color: #fff;
    }
    p {
        text-align: center;
    }
    .img {
        width: auto;
        height: 100%;
        max-width: 100%;
    }
</style>
<body>
    <div>
        同时按住Windows+Print Screen组合键，笔记本则按住Windows+Prt Sc SysRq组合键，则能全屏截图，仅适用Windows系统。
    </div>
    <div id="div" class="div">
        <p>【Ctrl+v】粘贴图片试试</p>
        <div class="div2">
           <img id="img" src="" alt="" class="img" /> 
        </div>
    </div>

    <script>
        const div = document.getElementById("div")
        const img = document.getElementById("img")
        function handlepaste(e) {
            // 粘贴对象
            if (e.clipboardData || e.originalEvent) {
                const clipboardData = (event.clipboardData || event.originalEvent.clipboardData);
                if (clipboardData.items) {
                    let blob;
                    for (let i = 0; i < clipboardData.items.length; i++) {
                        if (clipboardData.items[i].type.indexOf('image') !== -1) {
                            blob = clipboardData.items[i].getAsFile();
                        }
                    }

                    // 粘贴数据
                    console.log(blob, 'blob')

                    // 生成文件对象
                    const filer = new FileReader()
                    
                    // 将获取的粘贴数据转成 URL格式的字符串（base64编码）
                    filer.readAsDataURL(blob)
                    
                    // 这个回调在 filer.readAsDataURL(blob) 的时候触发
                    filer.onload = (e) => {
                        console.log(e, 'FileReader')
                        // 获取URL格式的字符串 Base64编码
                        const base64 = e.target.result;
                        console.log(base64, 'base64')
                        // 通过img输出
                        img.src = base64
                    };

                }
            }
        }
        

        div.addEventListener('paste', handlepaste)
    </script>
</body>
</html>

JS paste the display picture and read the picture

Mainly by binding the paste event to the div

Paste event core code

Complete code

Guess you like