JS读取粘贴板内容

1.1 监听onpaste事件

1.1.1 定义和用法

npaste 事件在用户向元素中粘贴文本时触发。

注意： 虽然使用的 HTML 元素都支持 onpaste 事件，但实际上并非支持所有元素，例如 <p> 元素，除非设置了 contenteditable 为 "true" (查看下文的更多实例)。

提示： onpaste 事件通常用于 type="text" 的 <input> 元素。

提示： 有三种方式可以在元素中粘贴内容：

1》按下 CTRL + V

2》从浏览器的编辑菜单中选择 "Paste（粘贴）"

3》右击鼠标按钮在上下文菜单中选择 "Paste（粘贴）" 命令。

1.1.2 语法

HTML 中：

<element onpaste="myScript">

JavaScript 中：

object.onpaste=function(){myScript};

JavaScript 中, 使用 addEventListener() 方法:

object.addEventListener("paste", myScript);

注意： Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。

当向 <p> 元素上粘贴文本内容时执行 JavaScript (注意 contenteditable 设置为 "true"):

<p contenteditable="true" onpaste="myFunction()">尝试在段落中粘贴内容。</p>

1.1.3 `event.clipboardData`

通过事件回调中的event参数，获取剪贴板数据event.clipboardData(不是所有的浏览器都支持)

// '/image/.test(event.clipboardData.types)' // 检查是否为图片

// 获取图片二进制数据（似乎浏览器的实现都会有大小差异）

Array.each(event.clipboardData.items, function(item){

if (/image/.test(item.type)) {

var blob = item.getAsFile();

var URL = window.URL || window.webkitURL;

var source = URL.createObjectURL(blob);

console.log(source)

});

通过Ajax将数据发送到后端服务器，后端将图片存储起来后，返回一个图片可访问地址

访问这个地址就可以看到图片了

1.2 使用样例

1》绑定单个元素事件

window.addEvent("paste",function(e){ });

<html>
<head>
    <title>test chrome paste image</title>
<style>
    DIV#editable {
        width: 400px;
        height: 300px;
        border: 1px dashed blue;
    }
</style>
<script type="text/javascript">

window.onload=function() {
    function paste_img(e) {
    debugger;
        if ( e.clipboardData.items ) {
        // google-chrome 
            alert('support clipboardData.items(chrome ...)');
            ele = e.clipboardData.items
            for (var i = 0; i < ele.length; ++i) {
                if ( ele[i].kind == 'file' && ele[i].type.indexOf('image/') !== -1 ) {
                    var blob = ele[i].getAsFile();
                    window.URL = window.URL || window.webkitURL;
                    var blobUrl = window.URL.createObjectURL(blob);
                    console.log(blobUrl);

                    var new_img= document.createElement('img');
                    new_img.setAttribute('src', blobUrl);
                    var new_img_intro = document.createElement('p');
                    new_img_intro.innerHTML = 'the pasted img url(open it in new tab): <br /><a target="_blank" href="' + blobUrl + '">' + blobUrl + '</a>';

                    document.getElementById('editable').appendChild(new_img);
                    document.getElementById('editable').appendChild(new_img_intro);
                }

            }
        } else {
            alert('non-chrome');
        }
    }
    document.getElementById('editable').onpaste=function(){paste_img(event);return false;};
}

</script>
</head>
<body >
    <h2>test image paste in browser</h2>
    <div id="non-editable" >
        <p>copy the following img, then paste it into the area below</p>
        <img src="./128.png" />
    </div>
    <div id="editable" contenteditable="true" >
        <p>this is an editable div area</p>
        <p>paste the image into here.</p>
    </div>
</body>
</html>

2》遍历循环所有的事件