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

<!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>

 

posted @ 2020-06-27 20:14  flamestudio  阅读(508)  评论(0)    收藏  举报