js剪切板应用clipboardData实例解析

2022-01-11,,,,

这篇文章主要为大家详细介绍了js剪切板应用clipboardData实例,并分享了四种实现方法,感兴趣的小伙伴们可以参考一下

目前仅有高版本的 Chrome 浏览器支持这样直接粘贴,其他浏览器目前为止还无法粘贴,不过火狐和ie11浏览器在可编辑的div中能够粘贴截图的图片也是base64位和Chrome利用clipboardData的效果是一样的,只是在火狐和ie11浏览器中目前还无法实现类似用clipboardData直接获取图片的base64数据,它是自带的直接进去img数据。

完整实例:

   利用clipboardData在网页中实现截屏粘贴的功能 .box{ width:500px; height:300px; border:1px solid #ddd; } .box img{max-width:480px; max-height: 100%; text-align: center;}   

实例二:

   Document 

实现的方法:

方法一:在Chrome浏览器中能够直接通过clipboardData获取截图的图片数据,可以用ajax将数据传给后台,然后由后台开发返回带域名的图片地址

方法二:由于在火狐等浏览器中无法直接获取图片数据,所以可以在粘贴的时候获取div中的img的数据是base64的url数据,然后同方法一用ajax

方法三:可以统一在点击发布或者保存消息时,获取div中的img的数据是base64的url数据,然后同方法一用ajax,如果有多张就循环,也或者是直接点击保存和发布的时候,后端开发做处理,返回来的显示信息中直接做处理,这样我们在div中就不需要把base64的url替换成后端返回的带域名的地址

方法四:在div中粘贴的时候弹出一个弹出层,然后弹出层中有截图的图片预览可确认上传按钮,点击上传按钮走ajax上传图片同方法一

以上就是js剪切板应用clipboardData实例解析的详细内容,更多请关注本站其它相关文章!

《js剪切板应用clipboardData实例解析.doc》

下载本文的Word格式文档,以方便收藏与打印。