CEF JS实现获取剪贴板图片的DataURL

转载：https://www.deanhan.cn/js-paste-upload.html

转载：https://segmentfault.com/a/1190000002915597

转载：https://www.cnblogs.com/dcb3688/p/4610638.html

转载：https://blog.csdn.net/dongyuxu342719/article/details/83754352

项目开发中遇到一个需求，需要在CEF浏览器当中使用快捷键显示用QQ、微信等截图工具的截屏图片。

<!DOCTYPE html>
<html>
<head></head>
<body><div id="preview" class="preview"></div><textarea id="result" style="width:800px; height:600px; resize:none"></textarea><script>var body = document.getElementsByTagName('body')[0];body.addEventListener('paste', function(e){var clipboard = e.clipboardData;var type = clipboard.items[0].type;if (type.match(/image/)) {var blob = clipboard.items[0].getAsFile();var file = new FileReader();file.addEventListener('loadend', function(e){document.getElementById('result').value = e.target.result;});file.readAsDataURL(blob);} else {//document.getElementById('result').value = "not an image\ntype: " + type + "\n\n";//图片base64编码
               preview.innerHTML = '<img src="' + e.target.result + '">';//img便签显示剪切板图片
            }});</script>
</body>
</html>

给body添加一个paste事件，会在粘贴时触发，粘贴有关的信息都会随着e传入回调函数。e是一个ClipboardEvent，获取它的clipboardData，就可以通过一系列操作取出数据。

首先检查一下粘贴数据的类型，如果是图片则取出Blob对象，再用FileReader去读取，结果就是DataURL了。

如果不是图片，直接打印提示信息。

粘贴一段文本的效果：

这里需要注意的是，paste是在粘贴前触发的，所以文本会在提示信息打印后被粘贴到文本框里（粘贴的默认行为）。如果需要取消这种默认行为，可以用 e.preventDefault() 。

效果：

转载于:https://www.cnblogs.com/chechen/p/10608777.html

CEF JS实现获取剪贴板图片的DataURL相关推荐

js如何获取html图片,JS/JQuery获取网页或文章或某DIV所有图片
要获取网页所有图片,我们可以通过Javascript就能轻松实现,不过要想获得文章或某容器(如:Div)里所有图片,使用JQuery而不是Javascript来实现就会变得更加简单.本文将给你详细介绍 ...
JS快速获取图片宽高的方法
JS快速获取图片宽高的方法快速获取图片的宽高其实是为了预先做好排版样式布局做准备,通过快速获取图片宽高的方法比onload方法要节省很多时间,甚至一分钟以上都有可能,并且这种方法适用主流浏览器包括I ...
php 获取图片的宽高,JS怎么获取图片当前宽高
JS获取图片当前的宽高,我们可以使用JavaScript clientWidth和clientHeight属性来实现获取.clientWidth.clientHeight属性表示获取图像的当前宽度和高 ...
JS获取img图片的原始尺寸高度和宽度
目录方式一:obj.style.width 方式二:width/height 方式三:offsetWidth/clientWidth 方法四: getComputedStyle和 currentSt ...
html图片如何复制到剪贴板,js 如何实现复制图片到剪切板
首先复制到剪切板,复制的是数据.图片看到的只是一种表现形式,图片可以用 js 对象 File.Blob.DataURL(base64) 体现出来. 又看到 document.execCommand(' ...
js 复制文字和图片到剪贴板
js 复制文字和图片到剪贴板最近有个需求,要同时复制多张图片和文字到剪贴板,网上找了好多方法,都不行,最后上个厕所,想到直接翻w3c文档,终于实现了.让大家不迷路,共享出来,不用谢,点赞就行. 不多 ...
html中显示js获取的图片地址,js如何获取UEditor富文本编辑器中的图片地址
写之前在网上找了很多方法,最简单的思路应该是1.获取UEditor中的内容:2.将获取到的字符串转换成jquery对象:3.选择器找到img元素,获取src值.var content= UE.getE ...
html本地路径图片转成base64,canvas-toDataURL()将图片转为dataURL（base64）
将图片转为base64的好处将图片转换为Base64编码,可以让你很方便地在没有上传文件的条件下将图片插入其它的网页.编辑器中. 这对于一些小的图片是极为方便的,因为你不需要再去寻找一个保存图片的地 ...
java todataurl_利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
将图片转为base64的好处将图片转换为Base64编码,可以让你很方便地在没有上传文件的条件下将图片插入其它的网页.编辑器中. 这对于一些小的图片是极为方便的,因为你不需要再去寻找一个保存图片的地 ...
js大屏导出图片_超大图片全屏动态展示js插件
intense-images是一款非常实用的超大图片全屏动态展示js插件.该图片查看插件可以全屏显示超大图片,可以使用鼠标来和图片进行交互,上下左右移动鼠标会相应的移动图片,对于超大图片的展示是非常好 ...

CEF JS实现获取剪贴板图片的DataURL

CEF JS实现获取剪贴板图片的DataURL相关推荐

最新文章

热门文章