js 图片粘贴 paste事件

 js图片粘贴

1：创建 ‘paste’  监听事件

2：判断剪切板是否有file 对象

3：获取剪切板中的图片对象

4：使用FileReader将图片信息写入节点中

  document.addEventListener('paste',function(e){
        if ( !(e.clipboardData && e.clipboardData.items) ) {
            return;
        }
        //console.log(e.clipboardData.items)
        for (var i = 0, len = e.clipboardData.items.length; i < len; i++) {
            var item = e.clipboardData.items[i];
            //console.log(item)
            if (item.kind === "file") {
                var f= item.getAsFile();
                //console.log(f);
                var reader=new FileReader()
                reader.onload=function (e) {
                    var img=document.createElement('img') //创建img节点
                    img.src=e.target.result //设置img的src属性
                    document.querySelector("#div").appendChild(img) //将img添加到div中
                }
                reader.readAsDataURL(f)
            }
        }
    });

 

我遇见了一个bug，本地图片直接复制无法进行粘贴，必须打开图片之后在复制才能粘贴成功；

有哪位大佬可以说一下什么原因吗？

FileReader详解

Html5 js FileReader接口

https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader