赞助

CEF JS实现获取剪贴板图片的DataURL

转载：https://www.deanhan.cn/js-paste-upload.html

转载：https://segmentfault.com/a/1190000002915597

转载：https://www.cnblogs.com/dcb3688/p/4610638.html

转载：https://blog.csdn.net/dongyuxu342719/article/details/83754352

项目开发中遇到一个需求，需要在CEF浏览器当中使用快捷键显示用QQ、微信等截图工具的截屏图片。

<!DOCTYPE html>
<html>
<head></head>
<body>
    <div id="preview" class="preview"></div>
    <textarea id="result" style="width:800px; height:600px; resize:none"></textarea>
    <script>
        var body = document.getElementsByTagName('body')[0];
        body.addEventListener('paste', function(e){
            var clipboard = e.clipboardData;
            var type = clipboard.items[0].type;
            if (type.match(/image/)) {
                var blob = clipboard.items[0].getAsFile();
                var file = new FileReader();
                file.addEventListener('loadend', function(e){
                    document.getElementById('result').value = e.target.result;
                });
                file.readAsDataURL(blob);
            } else {
                //document.getElementById('result').value = "not an image\ntype: " + type + "\n\n";//图片base64编码
               preview.innerHTML = '<img src="' + e.target.result + '">';//img便签显示剪切板图片
            }
        });
    </script>
</body>
</html>

给body添加一个paste事件，会在粘贴时触发，粘贴有关的信息都会随着e传入回调函数。e是一个ClipboardEvent，获取它的clipboardData，就可以通过一系列操作取出数据。

首先检查一下粘贴数据的类型，如果是图片则取出Blob对象，再用FileReader去读取，结果就是DataURL了。

如果不是图片，直接打印提示信息。

粘贴一段文本的效果：

这里需要注意的是，paste是在粘贴前触发的，所以文本会在提示信息打印后被粘贴到文本框里（粘贴的默认行为）。如果需要取消这种默认行为，可以用 e.preventDefault() 。

 效果：

posted @ 2019-04-09 14:27  车臣  阅读(1103)  评论(0)  编辑  收藏  举报