js读取剪切板字符串，图片，文本文件_js获取剪切板图片-CSDN博客

本文章作者主页，https://blog.csdn.net/qq_43319748，未经作者允许禁止转载，如有问题，欢迎指正！☺☺☺

本文链接：https://blog.csdn.net/qq_43319748/article/details/127515870

效果：

一直想研究一些剪切板怎么操作使用，始终没有找到简单的js插件，今天正好有时间，研究下。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .size {
            width: 30%;
            height: 500px;
            border: 6px solid #000000;
            padding: 10px;
            float: left;
        }

        .size1 {
            width: 32%;
            float: left;
            font-size: 20px;
        }
    </style>
</head>
<body>
<div>
    <label class="size1">剪切板中的文本</label>
    <label class="size1">剪切板中的图片文件</label>
    <label class="size1">剪切板中的文本文件</label>
</div>
<div>
    <textarea class="size" id="previewCVText" wrap="off"></textarea>
    <img class="size" src="" id="previewImage">
    <textarea class="size" id="previewText" wrap="off"></textarea>
</div>

<script>
    document.addEventListener('paste', function (event) {
        if (!event || !event.clipboardData) return;
        let pText = event.clipboardData.getData('text/plain');
        if (pText) {//有文本内容的时候才是true   注意：空字符串''是false
            showCVText(pText);
        } else if (event.clipboardData.items) {//没有文本内容，判断这个数组，文件可能在这个数组里
            let blob = null, items = event.clipboardData.items;
            for (let i = 0; i < items.length; i++) {
                if (items[i].kind === 'file') {//类型 是 文件
                    blob = items[i].getAsFile();
                    if (items[i].type.indexOf("image") !== -1) {//文件类型是图像
                        showImage(blob);
                    } else if (items[i].type.indexOf("text") !== -1) {//文件类型是文本
                        showText(blob);
                    }
                }
            }
        } else {
            alert("粘了个寂寞");
        }
    })

    function showCVText(text) {
        document.getElementById("previewCVText").value = text;
    }


    function showText(blob) {
        getContext(blob).then(res => {
            res = res.substring(res.indexOf('base64,') + 7);//去掉头"data:text/plain;base64,"
            res = window.atob(res);//base64解码
            document.getElementById("previewText").value = res;
        })
    }

    function showImage(blob) {
        getContext(blob).then(res => { //图片数据能直接被img识别
            document.getElementById("previewImage").src = res;
        })
    }

    /**
     * 把字节转为web识别的base64格式数据
     * @param blob
     * @returns {Promise<unknown>}
     */
    function getContext(blob) {
        return new Promise((resolve) => {
            if (blob == null) resolve();
            let reader = new FileReader();
            reader.onload = function (event) {
                console.log(event)
                resolve(event.target.result);
            }
            reader.readAsDataURL(blob);
        });
    }

</script>

</body>
</html>