JS获取粘贴板中的图片进行展示和上传
目前有一个需求,需要在页面中获取QQ、微信等软件的截图上传到服务器,为了用户体验,不能让用户主动上传,提供给用户方法,在web页面使用粘贴快捷键,就可以粘贴到页面,然后点击发送进行上传。而且用户如果粘贴的是文字也需要能正常发送文字内容。
这个需求需要分为四个部分:
1、构造页面,存放获取的数据
2、获取粘贴板中的内容
3、在页面展示获取的内容
4、将获取的图片内容发送到服务器存储
首先看第一部分,构造页面,这里省去其他部分,主要介绍这个功能,因此只需要在body标签中存在两个div,一个存储展示的图片,一个用于输入文字。在默认情况下可以输入文字,因此这时展示图片的div是隐藏状态,具体代码如下:
<body><div id="jietuWrap" class="b1" style="display:none;"><img id="jietuImg" src=""><br /><button class="sendBtn" onclick="send_msg()">发送</button></div><div class="b1"><textarea id="dope" class="newtextarea"style="width: 99%; border: none; outline: none; resize: none; font-size: 15px; color: black;" onkeydown="suball()"></textarea><br /><button class="sendBtn" onclick="send_msg()">发送</button></div>
</body>
然后是第二、三部分,获取粘贴板的内容并展示,可以通过window对象的子对象clipboardData对象获取,其中保存了复制、剪切、粘贴的内容,这里只需要用到粘贴部分。ClipboardEvent对象中就包含了clipboardData对象,我们在监听到粘贴事件时,就可以获取到ClipboardEvent,然后获取到clipboardData对象,它是一个DataTransfer类型的对象,DataTransfer是拖动产生的一个对象,但实际上粘贴事件也是它:
从其中可以看到,data就是获取到的clipboardData对象对象,具体内容如下:
dropEffect: "none"
effectAllowed: "uninitialized"
files: FileList {length: 0}
items: DataTransferItemList
0: DataTransferItem
kind: "file"
type: "image/png"
__proto__: DataTransferItem
getAsFile: ƒ getAsFile()
getAsString: ƒ getAsString()
kind: (...)
type: (...)
webkitGetAsEntry: ƒ webkitGetAsEntry()
constructor: ƒ DataTransferItem()
Symbol(Symbol.toStringTag): "DataTransferItem"
get kind: ƒ ()
get type: ƒ ()
__proto__: Object
length: 1
__proto__: DataTransferItemList
types: ["Files"]
__proto__: DataTransfer
这是获取粘贴板的内容,所以最主要用到的是items对象,items是一个DataTransferItemList对象,里面是DataTransferItem类型的数据。items的DataTransferItem有两个属性kind和type:
kind |
String或者file |
type |
具体的数据类型,比如字符串类型或者是文件的类型,即MIME-TYPE |
比如这里的例子中kind就是file,type是image/png。
还要用到一个方法来获取具体的文件或字符串的内容,即示例中的getAsFile()和getAsString()方法,从名字就可以看出来获取图片等文件就用getAsFile(),获取字符串就用getAsString()。
上面的例子就可以通过var blob=data.items[0].getAsFile();来获取图片内容。然后获取图片的base64流,通过ajax就可以上传到服务器。
下面列出第一部分,获取剪切板中的内容的代码:
//绑定粘贴事件 Ctrl+V
bindPaste();
//绑定粘贴事件
function bindPaste(){//定义变量存储获取的图片内容var blob;//获取body对象var body = document.getElementsByTagName("body");//定义body标签绑定的粘贴事件处理函数var fun=function(e){//获取clipboardData对象var data=e.clipboardData||window.clipboardData;//获取图片内容blob=data.items[0].getAsFile();//判断是不是图片,最好通过文件类型判断var isImg=(blob&&1)||-1;var reader=new FileReader();if(isImg>=0){//将文件读取为 DataURLreader.readAsDataURL(blob);}//文件读取完成时触发reader.onload=function(event){//获取base64流var base64_str=event.target.result;//div中的img标签src属性赋值,可以直接展示图片$("#jietuImg").attr("src",base64_str);//显示div$("#jietuWrap").css("display","block");//隐藏输入文字的div$("#jietuWrap").next().css("display","none");}}//通过body标签绑定粘贴事件,注意有些标签绑定粘贴事件可能出错body[0].removeEventListener('paste',fun);body[0].addEventListener('paste',fun);
}
最后就是将获取的图片的base64流通过ajax发送到服务器存储到资源服务器了,前端ajax大致如下:
// 上传的数据除了图片外,还可以包含自己需要传递的参数var data = {userId : $('#userId').val(),base64 : savedPictureContent};$.ajax({type : "POST",url : "${ctx}/../jsp/fileInfo/sendPrintScreen.action",dataType : "json",data : data,success : function(data) {var res = data.result;if (!res) {alert("上传失败!");} else {alert("上传成功!");}},error : function() {alert("由于网络原因,上传失败。");}});
后端处理代码:
/*** base64图片上传(截图)*/@RequestMapping("/sendPrintScreen")public void sendPrintScreen(String userId,String base64){if (StringUtils.isNotEmpty(base64)){if (base64.contains("base64,")){base64=base64.substring(base64.indexOf("base64,")+7);}}MultipartFile sendFile=BASE64DecodedMultipartFile.base64ToMultipartFile(base64);//上传文件的工具类this.sendFileUtil(sendFile userId);}
注意后台获取base64流时必须要从字符串"base64, "后面开始截取,否则存储的图片会有问题。
最新测试发现,只可以获取到复制的QQ、微信、文件内的图片,如果是文件夹内保存的图片文件,复制之后是获取不到的。但是既然这种文件可以复制到比如Word中,应该也是通过剪切板获取的,这里却获取不到,没有想出原因是什么,不知道有没有人知道原因。。
JS获取粘贴板中的图片进行展示和上传相关推荐
- html文本框监听粘贴,HTML5将粘贴板上的图片粘贴到文本框中
小C的第一篇技术贴,不知道怎么写,就随便写点了,如果内容不是很好还请大家见谅,尽量给小C提点建议,遇到出错的地方请告诉小C,小C会根据错误的严重程度给大家发红包,小C在这里非常感谢了. 在一次开发中遇 ...
- 从富文本(html字符串)中获取图片,js获取富文本中的第一张图片(正则表达式)
js获取富文本中的第一张图片url正则公式及去除字符串里面的html标签 后台发来一个富文本字符串里面可能包含了0.1.2.3-个图片标签(img),我们的任务是获取这个字符串里面第一张图片的url, ...
- React onPaste 获取粘贴板的值
React 中, 获取 粘贴板的值, 使用下面的方法 console.log(e.clipboardData.getData('Text')); 如果是 JS 中的 onpaste 事件, 则使用 v ...
- js获取html代码中所有图片地址
/** * JS获取html代码中所有的图片地址 * @param htmlstr * @returns imgsrcArr 数组 */ function getimgsrc(htmlstr) { v ...
- 百度人脸识别技术应用003---百度云离线SDK_Android版_功能分析_获取摄像头视频流中的图片_发给百度人脸识别API_识别搜索_或先同步百度云人脸信息_然后本地人脸识别
1.基于上一节,我们已经把百度云上的人脸库,建好了,然后我们可以从,百度云官网拿到, 离线人脸识别的SDK. SDK下载_文字识别SDK_语音识别SDK-百度AI开放平台 这里可以点进去下载 2.然后 ...
- 如何用迅捷PDF转换器获取PDF文件中的图片
工作中有的人喜欢将文档保存为PDF格式,因为PDF格式安全性和兼容性都比较高,但是在使用PDF文档的时候,也会一些小问题,比如说,PDF文档过大,想要查看文档中的图片,就需要耗费不少的时间,那么怎么才 ...
- js获取对象数组中的id集合
js获取对象数组中的id集合 const ids = Array.from(this.checkList,({ id }) => id); // ["16921C72E0C64002& ...
- js实现粘贴板js插件clipboard.js实现一键复制粘贴功能
js实现粘贴板js插件clipboard.js实现一键复制粘贴功能 简介 下载 引入插件 使用 一个节点的复制 多个节点的复制 剪切文本框 复制输入框 简介 clipboard.js 提供了一种更好. ...
- layerui js获取数据表格中的动态内容on失效live失效
layerui js获取数据表格中的动态内容on失效live失效.由于jquery1.9版本之后不再使用live,所以改成on,但直接使用on以layer中又不起作用.于是用下面的语句. $(docu ...
最新文章
- 深度学习中的优化算法与实现
- 机器学习笔记:线性规划,梯度下降
- 3D图形图像处理软件HOOPS介绍及下载
- HashSet源码分析
- 并发基础(三): java线程优先级小试牛刀
- 大学有哪些专业python_python就业方向有哪些?
- 微服务架构统一安全认证设计与实践
- 2018中国C++大会精彩回顾
- 用ul li实现边框重合并附带鼠标经过效果
- php创建windos用户,window_Win7系统创建及开启隐藏账户图文教程, 在电脑操作中有时候因为 - phpStudy...
- nc拉单查询模版_用友NC的模板管理_操作步骤
- 撤销工作表保护原密码_批量解除工作表保护,和批量执行保护一样简单
- MATLAB中使用IPOPT去解NLP问题的接口:AMPL 工具
- Solidworks教程:利用Simulation模拟热传导
- 青出于蓝而胜于蓝——揭秘全新的 HWSQL
- 如何破解XP开机密码
- JAVA检验密码复杂度+随机生成6位密码
- 合格的数据分析师需要具备哪些能力?
- 南京理工大学计算机学院张勇,2015年南京理工大学研究生数模竞赛获奖名单
- 5G/NR CSI学习总结
热门文章
- win10服务器无法在此时接受控制信息,win10提示该页正在访问其控制范围之外的信息的处理办法...
- 消息队列产生严重消息堆积怎么处理?
- php.ini中的cgi.fix_pathinfo选项
- 96、计算一串字符中有多少个单词
- Excel 下拉菜单
- 台式计算机蓝屏代码08e,Windows8.1开机蓝屏提示蓝屏代码0x000008e怎么修复?
- wifi7什么时候上市?介绍一下wifi7和wifi6的区别
- 36岁生日快乐:本命年的一道坎
- 城市旅游景点信息交流平台的设计与实现 毕业设计-附源码290915
- 8000个JQuery特效(插件)