更多參考:點這里
復制、剪切、粘貼事件：
- copy 發生復制操作時觸發;
- cut 發生剪切操作時觸發;
- paste 發生粘貼操作時觸發;
每個事件都有一個 before 事件對應：beforecopy、beforecut、beforepaste;
這幾個 before 一般不怎么用，所以我們把注意力放在三個事件就可以了。
copy復制操作:
copy事件使用示例：
<body>
gggwgzgf
</body>
<script type="text/javascript">
document.body.oncopy = e => {
// 監聽全局復制 做點什么
console.log(e)
};
</script>
我們可以看到事件對象中的屬性：
我們主要研究的是里面的clipboardData屬性對象
clipboardData 對象: 用於訪問以及修改剪貼板中的數據
clipboardData對象中有兩個方法：
setData():常配合copy事件使用，用於設置到剪貼板中的值
getData():常配合paste事件使用，用於獲取設置到剪貼板中的值
不同瀏覽器，所屬的對象不同：在 IE
中這個對象是window對象的屬性，在Chrome、Safari和Firefox中，這個對象是相應的event對象的屬性。所以我們在使用的時候，需要做一下如下兼容:
document.body.oncopy = e => {
let clipboardData = e.clipboardData || window.clipboardData;
// 獲取clipboardData對象 + do something
};
copy配合getSelection實現復制某段文本
<body>
gggwgzgf
</body>
<script type="text/javascript">
document.body.oncopy = e => {
console.log(window.getSelection().toString())
let copyMsg = window.getSelection().toString()
//把值設置到剪貼板中，方便paste事件觸發去拿
e.clipboardData.setData("Text", copyMsg);
};
</script>
注意：window.getSelection().toString()我是調用toString()方法轉成文本的，如果不調用這個方法，直接通過window.getSelection()取到值存到剪貼板會有出奇的效果，會連同效果一起粘貼(比如html格式的,會隱性地把<body>什么都復制進去)，需要配合paste事件
paste粘貼事件
<body>
gggwgzgf
<input placeholder="這里存放粘貼操作的值" />
</body>
<script type="text/javascript">
document.body.oncopy = e => {
console.log(window.getSelection().toString())
let copyMsg = window.getSelection().toString()
e.clipboardData.setData("Text", copyMsg);
};
document.body.onpaste=function(e){
var data = e.clipboardData.getData("Text")
document.querySelector("input").value = data
}
</script>
通過patse事件獲取剪切板中的圖片：
<script type="text/javascript">
document.addEventListener('paste', function(event) {
var items = (event.clipboardData && event.clipboardData.items) || [];
var file = null;
if(items && items.length) {
for(var i = 0; i < items.length; i++) {
if(items[i].type.indexOf('image') !== -1) {
file = items[i].getAsFile();
break;
}
}
}
console.log(file)
});
</script>
解釋： 當粘貼事件觸發時遍歷剪切版對象（clipboardData）中的所有items，找到類型為圖片的item並調用getAsFile方法得到文件對象
拿到file 對象后我們有幾種選擇：
- 通過
fileReader得到文件對象的base64字符串
var reader = new FileReader();
reader.onload = function(e){
// 通過e.target.result取到base64然后上傳
// 作為src設到image標簽上預覽
}
reader.readAsDataURL(file); //此處的file為上面得到的文件對象```
- 通過
formData文件對象轉換為二進制數據
var formData = new FormData();
formData.append('file', file);
- 通過
URL.createObjectURL轉成url地址預覽
var blobUrl=URL.createObjectURL(file)
示例代碼：
<body>
<img src="" id="imgTest" />
</body>
<script type="text/javascript">
document.addEventListener('paste', function(event) {
var items = (event.clipboardData && event.clipboardData.items) || [];
var file = null;
if(items && items.length) {
for(var i = 0; i < items.length; i++) {
if(items[i].type.indexOf('image') !== -1) {
file = items[i].getAsFile();
break;
}
}
}
var blobUrl = URL.createObjectURL(file);
document.getElementById("imgTest").src = blobUrl;
});
</script>
局限性：
對於qq，微信等的截圖或者按print screen得到的截圖，還有任意網頁的右擊復制圖片都能完美支持，但是，對於電腦本地圖片文件的復制沒辦法從剪切版獲取到