背景
截图或页面复制图片,可以直接通过Ctrl+v 粘贴上传图片
原理
操作:复制(截图)=>粘贴=>上传
监听粘贴事件=>获取剪贴板里的内容=>发请求上传
浏览器:Chrome、IE11
Chrome浏览器
1、通过监听粘贴事件,event有clipboardData属性,且clipboardData有item属性
2、获取剪切板的base64编码字符串,传到后台服务器
3、服务器获取到base64编码字符串转化为图片保存服务器
4、前台获取图片名并展示
IE11
1、IE11是没有event有clipboardData属性的,所以不能直接获取base64编码字符串
2、页面放置一个带有contenteditable属性的div容器,用于接收IE粘贴的图片,PS:IE粘贴事件需要在设置了contenteditable属性的div粘贴才会触发
3、当进行粘贴操作,让焦点在div容器中,这时粘贴事件才会触发,DIV中直接生成IMG
4、从IMG中src获取base64编码字符串,传到后台服务器
5、服务器获取到base64编码字符串转化为图片保存服务器
6、前台获取图片名并展示
注意点:Chrome和IE11 触发paste事件的区别
1、Chrome无论在哪进行粘贴,均可触发paste事件
2、IE11只能在div中触发paste事件