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() 。
效果：
CEF JS实现获取剪贴板图片的DataURL的更多相关文章
- 使用Javascript获取剪贴板图片的DataURL
最近写博客需要插入一些截图,想着用DataURL会方便点,于是需要一个把图片转成DataURL的工具.搜索一番后发现这个功能用HTML就能实现,通过paste事件. 先尝试在Chrome上实现,Chr ...
- JS获取剪贴板图片之后的格式选择与压缩问题
前言 某年某月的某一天,突然发现博客服务器上上传的图片都比较大,一些很小的截图都有几百kb,本来服务器带宽就慢,不优化一下说不过去. 问题细述 特别说明:本文代码因为只是用于我自己后台写markdow ...
- js 怎样获取div 图片等的宽度，只要值，不要px
给你的div命名id=“abc”,js中用下面的语句就能获取到js的宽度并赋值给a a=document.all.abc.offsetWidth; 然后通过 alert(a); 就能弹出这个值来了.
- JS获取IMG图片高宽
前段时间在LJW写的touchslider.js轮播代码里添加自适应屏幕大小的功能时,遇到一个问题.不管用什么样的方法都无法获取到IMG标签的高宽,最后只有给图片定一个高宽的比例值:趁今天有空我就写了 ...
- 为什么不能用 JS 获取剪贴板上的内容？
为什么不能用 JS 获取剪贴板上的内容? 为什么不能用 JS 获取剪贴板上的内容? 发一串口令给朋友朋友复制这串口令,然后访问你的网站你在网站上用 JS 读取朋友剪贴板上的口令根据不同的口令,显示不同 ...
- JS快速获取图片宽高的方法
快速获取图片的宽高其实是为了预先做好排版样式布局做准备,通过快速获取图片宽高的方法比onload方法要节省很多时间,甚至一分钟以上都有可能,并且这种方法适用主流浏览器包括IE低版本浏览器. 我们一步一 ...
- 转载：JS快速获取图片宽高的方法
快速获取图片的宽高其实是为了预先做好排版样式布局做准备,通过快速获取图片宽高的方法比onload方法要节省很多时间,甚至一分钟以上都有可能,并且这种方法适用主流浏览器包括IE低版本浏览器. 我们一步一 ...
- js生成word中图片处理
首先功能是要求前台导出word,但是前后台是分离的,图片存在后台,所以就存在跨域问题. 导出文字都是没有问题的(jquery.wordexport.js),但是导出图片就存在问题了: 图片是以链接形式 ...
- 前端js保存页面为图片下载到本地
前端js保存页面为图片下载到本地 手机端点击下载按钮将页面保存成图片到本地 前端js保存页面为图片下载到本地的坑 html2canvas 识别 svg 解决方案 方案 html2canvas.js:可 ...
随机推荐
- C#中$的用法
class Program { static void Main(string[] args) { string tbName = "User"; string colName = ...
- Express全系列教程之(五)：Express的中间件
一.中间件 从字面意思,我们可以了解到它大概就是做中间代理操作,事实也是如此:大多数情况下,中间件就是在做接收到请求和发送响应中间的一系列操作.事实上,express是一个路由和中间件的web框架,E ...
- iostat查看io情况
查看TPS和吞吐量信息[root@controller ~]#iostat -d -k 1 10Device: tps kB_read/s kB_wrtn/s k ...
- Autofac之类型关联
前面的学习一直使用的是直接注册类型并不是Autofac已经依赖注入的主要使用方式,最佳的依赖注入与Autofac的使用方式,都是要结合面向接口(抽象)编程的概念的.推崇的是依赖于抽象而不是具体 pub ...
- Redis 开发规范
本文主要介绍在使用阿里云Redis的开发规范,从下面几个方面进行说明. 键值设计 命令使用 客户端使用 相关工具 通过本文的介绍可以减少使用Redis过程带来的问题. 一.键值设计 1.key名设计 ...
- 学号 20175201张驰 《Java程序设计》第5周学习总结
学号 20175201张驰 <Java程序设计>第5周学习总结 教材学习内容总结 第六章 ·1.接口的接口体中只可以有常量和abstract方法. ·2.和类一样,接口也是Java中一种重 ...
- [py]资源搜集
python在线内存图 我会把一些好的py book的资源放到这里 来源: https://piaosanlang.gitbooks.io/spiders/10day/README10.html Le ...
- 音乐类产品——“网易云音乐”app交互原型模板（免费使用）
网易云音乐虽是一款音乐app,但有人说它也是社交界的一股清流以及一匹黑马.音乐带给人的感染,激发着很多人在这里表达着他们的情绪和心声.网易云音乐上的真实用户点评,不仅被印在地铁的广告牌上,还在朋友圈频 ...
- mysql----------mysql的一些常用命令
1.查询一张表中某个字段重复值的记录 select id,cert_number from (select id,cert_number,count(*)as n from 表明 group by c ...
- hadoop启动namenode日志报这个错，首先说怎么看日志
hadoop启动namenode日志报这个错,首先说怎么看日志, 启动namenode会有这个,ubuntu: starting namenode, logging to /home/xiaoye/h ...