关键词：
目前仅有高版本的 Chrome 浏览器支持这样直接粘贴，其他浏览器目前为止还无法粘贴,不过火狐和ie11浏览器在可编辑的div中能够粘贴截图的图片也是base64位和Chrome利用clipboardData的效果是一样的，只是在火狐和ie11浏览器中目前还无法实现类似用clipboardData直接获取图片的base64数据，它是自带的直接进去img数据
完整实例：
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>利用clipboardData在网页中实现截屏粘贴的功能</title>
<style type="text/css">
.box{ width:500px; height:300px; border:1px solid #ddd; }
.box img{max-width:480px; max-height: 100%; text-align: center;}
</style>
</head>
<body>
<div class="box" contenteditable="true" id="testInput">
</div>
<script type="text/javascript">
(function(){
var imgReader = function( item ){
var blob = item.getAsFile(),
reader = new FileReader();
reader.onload = function( e ){
var img = new Image();
img.src = e.target.result;
console.log(img);
document.getElementById(‘testInput‘).appendChild( img );
};
reader.readAsDataURL( blob );
};
document.getElementById( ‘testInput‘ ).addEventListener( ‘paste‘, function( e ){
//window.clipboardData.getData("Text") ie下获取黏贴的内容 e.clipboardData.getData("text/plain")火狐谷歌下获取黏贴的内容
//alert(e.clipboardData.getData("text/plain") )
var clipboardData = e.clipboardData,//谷歌
i = 0,
items, item, types;
console.log(‘0‘)
if( clipboardData ){
console.log(‘1‘)
items = clipboardData.items;
if( !items ){
console.log(2)
return;
}
console.log(3)
item = items[0];
types = clipboardData.types || [];
for( ; i < types.length; i++ ){
if( types[i] === ‘Files‘ ){
item = items[i];
break;
}
}
if( item && item.kind === ‘file‘ && item.type.match(/^image//i) ){
imgReader( item );
}
}
},false);
})();
</script>
</script>
</body>
</html>
实例二：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<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 c = e.clipboardData.items[i];
var f = c.getAsFile();
var reader = new FileReader();
reader.onload = function(e) {
div.innerHTML += ‘<img src="‘ + e.target.result + ‘">‘;
}
reader.readAsDataURL(f);
}
}
});
</script>
</body>
</html>
实现的方法：
方法一：
在Chrome浏览器中能够直接通过clipboardData获取截图的图片数据，可以用ajax将数据传给后台，然后由后台开发返回带域名的图片地址
方法二：
由于在火狐等浏览器中无法直接获取图片数据，所以可以在粘贴的时候获取div中的img的数据是base64的url数据，然后同方法一用ajax
方法三：
可以统一在点击发布或者保存消息时，获取div中的img的数据是base64的url数据，然后同方法一用ajax，如果有多张就循环，也或者是直接点击保存和发布的时候，后端开发做处理，返回来的显示信息中直接做处理，这样我们在div中就不需要把base64的url替换成后端返回的带域名的地址
方法四：
在div中粘贴的时候弹出一个弹出层，然后弹出层中有截图的图片预览可确认上传按钮，点击上传按钮走ajax上传图片同方法一
系统截屏源码浅析
...的一种方式，可惜的是这种方式并不适用于surfaceview。2、利用adb命令，adbshellscreencap-ppath，再利用runtime去执行，但是这种方式需要获得系统权限方可。3、通过framebuffer实现截屏，帧缓冲（fram 查看详情
excel操作如何在网页中实现
...数据过来。这个适合单次处理，无需短期更新的内容2、利用excel提供的数据外部操作实现。这个有时可以更新以2007为例，如下图，即可创建一个带导入功能的浏览器窗口3、可以利用VBA对网页后台的访问，抓取返回内容进行拆分... 查看详情
如何利用js实现复制/粘贴功能
...ptlanguage="JavaScript"> functionreadTxt() alert(window.clipboardData.getData("text")); functionsetTxt() vart=document.getElementById("txt"); t.select(); window.clipboardData.setData(\'text\',t.createTextRange().text); </script> ... 查看详情
利用argument对象在javascript中实现重载（overload）
一些概念：重载(overload):什么是:相同函数名，不同参数列表的多个函数，在调用时，可根据传入参数的不同，自动选择对应的函数调用！为什么:减轻调用者的负担，一个函数名，可执行多种操作何时:一项任务，根据不同的参数... 查看详情
js剪切板的用法(clipboarddata.setdata)
...实这个功能实现起来也不难，核心就是用到了window子对象clipboardData的一个方法：setData()语法：参数：返回值：复制成功返回true；失败返回false。例如提供了对剪贴板的访问。三个方法 查看详情
使用js脚本进行网页截屏的尝试（图文）(代码片段)
最近研究的一个项目，需要使用浏览器进行截取网页截图，从github上找了几个项目代码都不是很符合，后来找到这个JavaScript-screenshot-master项目，进行了一下测试分享给大家。安装说明如下：将程序文件拷贝到... 查看详情
使用js脚本进行网页截屏的尝试（图文）(代码片段)
最近研究的一个项目，需要使用浏览器进行截取网页截图，从github上找了几个项目代码都不是很符合，后来找到这个JavaScript-screenshot-master项目，进行了一下测试分享给大家。安装说明如下：将程序文件拷贝到... 查看详情
利用css3制作网页动画
如何在网页中实现动画效果动态图片flashjavascriptcss3变形是一些效果的集合如平移旋转缩放倾斜效果每个效果都可以称为变形（transfrom）它们可以分别操控元素发生平移、旋转、缩放、倾斜等变换语法transform：[transfrom-function]*;变... 查看详情
网页如何防止图片被文件存为菜单
...你们！<scriptlanguage="javascript"><!--functiontestclip()tryif(clipboardData.getData("Text")||clipboardData.getData("HTML" 查看详情
网页html截屏转图片phantomjs(代码片段)
...JSON,Canvas,和SVG。PhantomJS可以用于页面自动化，网络监测，网页截屏，以及无界面测试等。我们还可以用它来做爬虫哦，大家知道，网页上有些数据是通过执行js渲染出来的，这样的话爬 查看详情
使用js脚本进行网页截屏的尝试（图文）(代码片段)
最近研究的一个项目，需要使用浏览器进行截取网页截图，从github上找了几个项目代码都不是很符合，后来找到这个JavaScript-screenshot-master项目，进行了一下测试分享给大家。安装说明如下：将程序文件拷贝到... 查看详情
如何在静态网页中实现禁止某ip访问，交流~
我有个动态网站，使用FSO生成了静态化网页，用户直接访问静态网页。这样一来本来动态网站中很容易实现的禁止指定IP用户访问却成了难题。我想过先让用户访问动态网页，如a.asp，确定不是禁止IP用户后再跳转到a.html的方法。... 查看详情
利用js实现网页禁止后退
<scriptlanguage="javascript">//防止页面后退history.pushState(null,null,document.URL);window.addEventListener(‘popstate‘,function(){history.pushState(null,null,document.URL);});</script> 查看详情
js修改剪切板内容的方法
代码如下：//绑定在了body上，也可以绑定在其他可用元素行，但是不是所有元素都支持copy事件。$(document.body).bind({copy:function(e){//copy事件letcpTxt="复制的数据";letclipboardData=window.clipboardData;//forIEif(!clipboardData){//forchromeclipboardDa 查看详情
利用js实现popup弹窗
简单实现一个通过一个网页，点击生成一个弹窗，然后点击保存之后自动关闭弹窗的功能。 首先在settings文件中写上两条对应的路由关系。1urlpatterns=[2url(r‘^p1/‘,p1),3url(r‘^p2/‘,p2),4]我们可以肯定的是我们需要一个网页，然... 查看详情
在js里怎么复制一个变量到粘贴板
参考技术Awindow.clipboardData.setData('text',str);测试一下：<scriptlanguage="javascript">functionreadTxt()alert(window.clipboardData.getData("text"));functionsetTxt()vart=document.getElementById("txt");t.select();window.clipboardData.setData('... 查看详情
利用canvas将网页元素生成图片并保存在本地(代码片段)
利用canvas将网页元素生成图片并保存在本地首先引入三个文件：1、<scripttype="text/javascript"src="js/html2canvas.js"></script>2、<scripttype="text/javascript"src="js/base64.js"></script&... 查看详情
js复制粘贴解决方案
1varclipboardData=window.clipboardData;//forIE2if(!clipboardData){//forchrome3window.prompt("按下Ctrl+C复制",adress);4}else{5clipboardData.setData(‘Text‘,adress);6eventBusService.publish(controllerName,‘a 查看详情