1.首先定义一个<div> 并且设置contenteditable(可编辑段落)属性为true.
2.为该div添加一个粘贴的监听事件：
document.getElementById('richedit').addEventListener('paste',function(e) {});
3.编写触发后的函数：
a.获取剪切板clipboardData对象,ie7，与ie8 对网页有个复制的权限，需在“安全”中的“自定义级别”的脚本中设置 clipboardData 对象。
var cbd = e.clipboardData;
b.判断是否有内容
if (cbd) { var items = cbd.items; if (!items) { return; } var item = items[0]; var types = cbd.types || [];// 保存在剪贴板中的数据类型 for (var i = 0; i < types.length; i++) { if (types[i] === 'Files') { item = items[i]; break; } } // 判断是否为图片数据 if (item && item.kind === 'file' && item.type.match(/^image\//i)) { var blob = item.getAsFile(); reader = new FileReader(); // 读取文件后将其显示在网页中 reader.onload = function(e) { var img = new Image(); //创建图像对象 img.src = e.target.result; document.getElementById('richedit').appendChild(img); var img = document.querySelectorAll('#richedit img'); for (var k = 0; k < img.length-1; k++) { for (var j = k + 1; j < img.length; j++) //解决chrome高版本粘贴两次的问题 if (img[k].src == img[j].src) { document.querySelector('#richedit').removeChild(img[j]); break; } } }; // 读取文件 reader.readAsDataURL(blob); } }
下面附有整个代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网页上实现截图粘贴</title>
<style type="text/css">
#richedit {
width:800px;
height:600px;
border:1px solid red;
overflow:auto;
}
</style>
</head>
<body>
<div id="richedit" contenteditable="true"></div>
</body>
</html>
<script type="text/javascript">
//为可编辑的div添加监听事件。
document.getElementById('richedit').addEventListener('paste',function(e) {
var cbd = e.clipboardData;//获取剪切板clipboardData对象，ie7，与ie8 对网页有个复制的权限，需在“安全”中的“自定义级别”的脚本中设置 clipboardData 对象
if (cbd) {
var items =cbd.items;
if (!items) {
return;
}
var item =items[0];
var types =cbd.types || [];// 保存在剪贴板中的数据类型
for (var i =0;i
if (types[i] ==='Files') {
item =items[i];
break;
}
}
// 判断是否为图片数据
if (item &&item.kind ==='file' &&item.type.match(/^image\//i)) {
var blob =item.getAsFile();
reader =new FileReader();// 读取文件后将其显示在网页中
reader.onload =function(e) {
var img =new Image();//创建图像对象
img.src = e.target.result;
document.getElementById('richedit').appendChild(img);
var img =document.querySelectorAll('#richedit img');
for (var k =0;k
for (var j =k +1;j
//解决chrome高版本粘贴两次的问题
if (img[k].src ==img[j].src) {
document.querySelector('#richedit').removeChild(img[j]);
break;
}
}
};// 读取文件
reader.readAsDataURL(blob);
}
}
});
</script>
