首页 > 其他 > 详细

浏览器监听Ctrl+V粘贴图片

时间:2020-06-27 20:42:42      阅读:118      评论:0      收藏:0      [点我收藏+]
<!DOCTYPE HTML>
<html>

<head>
    <meta charset="UTF-8">
    <title>利用 clipboardData 在网页中实现截屏粘贴的功能</title>
    <style type="text/css">
        #box {
            width: 200px;
            height: 200px;
            border: 1px solid #ddd;
        }
    </style>
</head>

<body>

    <h1>利用 clipboardData 在网页中实现截屏粘贴的功能</h1>
    <hr />
    <div><input type="text" id="testInput" placeholder="截屏后粘贴到输入框中" size="30" /></div>
    <script type="text/javascript">
        (function () {
            var imgReader = function (item) {
                var blob = item.getAsFile(),
                    reader = new FileReader();

                reader.onload = function (e) {
                    var img = new Image();

                    img.src = e.target.result;
                    document.body.appendChild(img);
                };

                reader.readAsDataURL(blob);
            };
            document.getElementById(testInput).addEventListener(paste, function (e) {
                var clipboardData = e.clipboardData,
                    i = 0,
                    items, item, types;

                if (clipboardData) {
                    items = clipboardData.items;

                    if (!items) {
                        return;
                    }

                    item = items[0];
                    types = clipboardData.types || [];

                    for (; i < types.length; i++) {
                        if (types[i] === Files) {
                            item = items[i];
                            break;
                        }
                    }

                    if (item && item.kind === file && item.type.match(/^image\//i)) {
                        imgReader(item);
                    }
                }
            });
        })();  
    </script>

</body>

</html>

 

浏览器监听Ctrl+V粘贴图片

原文:https://www.cnblogs.com/flamestudio/p/13199645.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!