js 实现图片粘贴

js图片粘贴

1：创建 ‘paste’ 监听事件 .addEventListener('paste',function(e){}）

2：判断剪切板是否有file 对象 item.kind === "file"

3：获取剪切板中的图片对象 item.getAsFile()

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问题

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

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

JavaScript中 FileReader对象详解

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

http://www.cnblogs.com/access520/p/5672435.html

 

转载于:https://my.oschina.net/u/3834275/blog/2250113