前言：
本功能只能上传剪切板中的图片。这种情况下剪切板数据来源一般是两种：
- 使用 QQ 等其他截图工具截屏的时候，剪切板中是有截屏图片的；
- 任意网页中的图片上“右键-复制图片”，也是在剪切板中。
但是操作系统的文件夹中复制图片，这个图片并不是在剪切板中，无法 ctrl+v 上传。
js粘贴截图
一、剪切板的图片粘贴到浏览器
使用的 fastStone capture 截图软件，截完图从截图软件的编辑器里面复制图片到剪切板，直接在浏览器的指定位置 ctrl+v 粘贴图片。如下图：
源代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>粘贴事件</title>
</head>
<body>
<div style="width:100px;height:100px;background-color:#673ab7;">
<h3>请截图并复制我</h3>
</div>
<div id="div" style="width:100%;height:700px;border:1px solid #ccc;padding:20px" contenteditable="true"></div>
<script>
var div = document.getElementById('div');
div.addEventListener('paste', function(e) {
if(e.clipboardData) {
for(var i = 0; i < e.clipboardData.items.length; i++) {
var f = e.clipboardData.files[0];
var reader = new FileReader();
reader.readAsDataURL(f);
reader.onload = function(e) {
div.innerHTML += '<img src="' + e.target.result + '">';
}
}
}
});
</script>
</body>
</html>
var f = e.clipboardData.files[0]; 可以直接拿到图片地址。和通过e.clipboardData.items[i].getAsFile(); 拿到的地址相同，都可以直接转化成 base64 位的图片进行预览。
二、copy 与剪切板
很多情况下我们在复制东西的时候，例如博客上的代码或文本总是会出现：
作者：xxxx
链接：xxxxx
来源：xx
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
这个好恶心的东西是怎么回事？很简单就是一个 copy 事件，当我们在复制文章内容的时候，copy 事件自动在剪切板文字后面加上一段版权声明。让我们来全局监听这个事件：
document.addEventListener('copy', function (event) {
var clipboardData = event.clipboardData || window.clipboardData;
if (!clipboardData) { return; }
var text = window.getSelection().toString();
console.log(window.getSelection().toString())
if (text) {
// 必须阻止掉默认事件，否则不起作用。
event.preventDefault();
clipboardData.setData('text/plain', text + '\n\n作者：xxxx\n链接：xxxxx\n来源：xx\n著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。');
}
});
除此之外还有个常见的业务就是禁止你复制网页的页内容提示你开通 VIP ，才能自由复制，恶心吧。看案例：
document.addEventListener('copy', function (event) {
alert("请开通VIP，才能复制本网站的内容！");
event.preventDefault();
});
别忘了阻止复制的默认事件。除非开通VIP。
