转载：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的更多相关文章

  1. 使用Javascript获取剪贴板图片的DataURL

    最近写博客需要插入一些截图,想着用DataURL会方便点,于是需要一个把图片转成DataURL的工具.搜索一番后发现这个功能用HTML就能实现,通过paste事件. 先尝试在Chrome上实现,Chr ...

  2. JS获取剪贴板图片之后的格式选择与压缩问题

    前言 某年某月的某一天,突然发现博客服务器上上传的图片都比较大,一些很小的截图都有几百kb,本来服务器带宽就慢,不优化一下说不过去. 问题细述 特别说明:本文代码因为只是用于我自己后台写markdow ...

  3. js 怎样获取div 图片等的宽度，只要值，不要px

    给你的div命名id=“abc”,js中用下面的语句就能获取到js的宽度并赋值给a a=document.all.abc.offsetWidth; 然后通过 alert(a); 就能弹出这个值来了.

  4. JS获取IMG图片高宽

    前段时间在LJW写的touchslider.js轮播代码里添加自适应屏幕大小的功能时,遇到一个问题.不管用什么样的方法都无法获取到IMG标签的高宽,最后只有给图片定一个高宽的比例值:趁今天有空我就写了 ...

  5. 为什么不能用 JS 获取剪贴板上的内容？

    为什么不能用 JS 获取剪贴板上的内容? 为什么不能用 JS 获取剪贴板上的内容? 发一串口令给朋友朋友复制这串口令,然后访问你的网站你在网站上用 JS 读取朋友剪贴板上的口令根据不同的口令,显示不同 ...

  6. JS快速获取图片宽高的方法

    快速获取图片的宽高其实是为了预先做好排版样式布局做准备,通过快速获取图片宽高的方法比onload方法要节省很多时间,甚至一分钟以上都有可能,并且这种方法适用主流浏览器包括IE低版本浏览器. 我们一步一 ...

  7. 转载：JS快速获取图片宽高的方法

    快速获取图片的宽高其实是为了预先做好排版样式布局做准备,通过快速获取图片宽高的方法比onload方法要节省很多时间,甚至一分钟以上都有可能,并且这种方法适用主流浏览器包括IE低版本浏览器. 我们一步一 ...

  8. js生成word中图片处理

    首先功能是要求前台导出word,但是前后台是分离的,图片存在后台,所以就存在跨域问题. 导出文字都是没有问题的(jquery.wordexport.js),但是导出图片就存在问题了: 图片是以链接形式 ...

  9. 前端js保存页面为图片下载到本地

    前端js保存页面为图片下载到本地 手机端点击下载按钮将页面保存成图片到本地 前端js保存页面为图片下载到本地的坑 html2canvas 识别 svg 解决方案 方案 html2canvas.js:可 ...

随机推荐

  1. Java第四次实践作业

    1 编写“电费管理类”及其测试类.  第一步 编写“电费管理”类 1)私有属性:上月电表读数.本月电表读数 2)构造方法:无参.2个参数 3)成员方法:getXXX()方法.setXXX()方法 4 ...

  2. C#中$的用法

    class Program { static void Main(string[] args) { string tbName = "User"; string colName = ...

  3. nodejs启动web项目

    1.在根目录路径下输入 npm install ,会自动下载所需的包 2.安装完成对应的包以后,npm start,会自动打开浏览器

  4. Elasticsearch学习笔记（十二）filter与query

    一.keyword 字段和keyword数据类型    1.测试准备数据 POST /forum/article/_bulk { "index": { "_id" ...

  5. CatLog_小鱼要加油

    python datetime 计算时间差 面向对象:类中的特殊成员 python中字符串的拼接 Django Django中一个项目使用多个数据库 Django中cookie和session使用 在 ...

  6. jps命令详解

    JPS 名称: jps - Java Virtual Machine Process Status Tool 命令用法: jps [options] [hostid] options:命令选项,用来对 ...

  7. ansible常用命令

    一.ansible常用命令 一.ansible命令的常用参数 ansible 默认提供了很多模块来供我们使用.在 Linux 中,我们可以通过 ansible-doc -l 命令查看到当前 ansib ...

  8. 原生js 基于canvas写一个简单的前端 截图工具

    先看效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...

  9. 2019年新软件发布分享HanGi.IT.AStrutTie.v2017 1CD

    Steelray Project Viewer 2019.1.69 1CDIAR Embedded Workbench for Renesas M16C-R8C v3.71.1 1CD Mentor ...

  10. JDBCUtils相关

    1.之所以使用类加载器InputStream is = JdbcUtils.class.getClassLoader().getResourceAsStream("jdbcInfo.prop ...