js剪切板应用clipboardData实例解析

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

完整实例：

<Meta charset="UTF-8"> 利用clipboardData在网页中实现截屏粘贴的<a href="https://www.jb51.cc/tag/gongneng/" target="_blank" class="keywords">功能</a>

Box" contenteditable="true" id="testInput">

实例二：

<Meta charset="UTF-8"> Document

实现的方法：

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

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

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

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

原文链接：https://www.f2er.com/js/48350.html

clipboardData js 剪切板

上一篇：js实现可控制左右方向的无缝滚动效下一篇：javascript实现粘贴qq截图功能（cl

js剪切板应用clipboardData实例解析

完整实例：

实例二：

实现的方法：

猜你在找的JavaScript相关文章