浏览器环境：谷歌浏览器

1.ctrl+v粘贴图片都是监听paste时间实现的，复制的数据都存在clipboardData下面，虽然打印显示数据长度为0，但是还是可以获取数据的

2.打印clipboardData.items发现是一个DataTransferItem。

3.DataTransferItem有个getAsFile()的方法，可以获取文件

    document.addEventListener('paste', function (event) {

        console.log(event);

        var isChrome = false;

        if (event.clipboardData || event.originalEvent) {

            //某些chrome版本使用的是event.originalEvent

            var clipboardData = (event.clipboardData || event.originalEvent.clipboardData);

            if(clipboardData.items){

                // for chrome

                var  items = clipboardData.items,

                    len = items.length,

                    blob = null;

                isChrome = true;

                for (var i = ; i < len; i++) {

                    console.log(items[i]);

                    if (items[i].type.indexOf("image") !== -) {

                        //getAsFile() 此方法只是living standard firefox ie11 并不支持

                        blob = items[i].getAsFile();

                    }

                }

            }

        }

    })

此时就可以获取到blob对象了，这时候可以选择显示在页面上，也可以选择发送给后台

3.1显示图片

　　3.1.1执行下面代码即可,使用blob对象显示

  var blobUrl=URL.createObjectURL(blob);

       document.getElementById("imgNode").src=blobUrl;

效果图

　　3.1.2使用base64码显示，需要借助FileReader

reader.onload = function (event) {

                        // event.target.result 即为图片的Base64编码字符串

                        var base64_str = event.target.result;

                        document.getElementById("imgNode").src=base64_str;

                    }

                    reader.readAsDataURL(blob);

3.2上传到后台

　　3.2.1生成formData,这里生成formData

  var fd = new FormData();

                    fd.append("the_file", blob, 'image.png');

3.3完整代码

完整代码如下

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        body {

            display: -webkit-flex;

            display: flex;

            -webkit-justify-content: center;

            justify-content: center;

        }

    </style>

</head>

<body>

<textarea></textarea>

<div contenteditable style="width: 300px;height: 100px; border:1px solid">

    <img src="" id="imgNode">

</div>

</body>

<script>

    document.addEventListener('paste', function (event) {

        console.log(event);

        var isChrome = false;

        if (event.clipboardData || event.originalEvent) {

            //某些chrome版本使用的是event.originalEvent

            var clipboardData = (event.clipboardData || event.originalEvent.clipboardData);

            if(clipboardData.items){

                // for chrome

                var  items = clipboardData.items,

                    len = items.length,

                    blob = null;

                isChrome = true;

                for (var i = ; i < len; i++) {

                    console.log(items[i]);

                    if (items[i].type.indexOf("image") !== -) {

                        //getAsFile() 此方法只是living standard firefox ie11 并不支持

                        blob = items[i].getAsFile();

                    }

                }

                if(blob!==null){

                    var blobUrl=URL.createObjectURL(blob);

                    //blob对象显示

                    document.getElementById("imgNode").src=blobUrl;

                    var reader = new FileReader();

                    //base64码显示

                   /* reader.onload = function (event) {

                        // event.target.result 即为图片的Base64编码字符串

                        var base64_str = event.target.result;

                        document.getElementById("imgNode").src=base64_str;

                    }

                    reader.readAsDataURL(blob);*/var fd = new FormData(document.forms[]);

                    fd.append("the_file", blob, 'image.png');

                    //创建XMLHttpRequest对象

                    var xhr = new XMLHttpRequest();

                    xhr.open('POST','/image' );

                    xhr.onload = function () {

                        if ( xhr.readyState ===  ) {

                            if ( xhr.status ===  ) {

                                var data = JSON.parse( xhr.responseText );

                                console.log(data);

                            } else {

                                console.log( xhr.statusText );

                            }

                        };

                    };

                    xhr.onerror = function (e) {

                        console.log( xhr.statusText );

                    }

                    xhr.send(fd);

                }

            }

        }

    })

</script>

</html>

js实现ctrl+v粘贴图片或是截图的更多相关文章

  1. js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)【转载】

    我们或多或少都使用过各式各样的富文本编辑器,其中有一个很方便功能,复制一张图片然后粘贴进文本框,这张图片就被上传了,那么这个方便的功能是如何实现的呢? 原理分析 提取操作:复制=>粘贴=> ...

  2. js实现ctrl+v粘贴上传图片(兼容chrome，firefox，ie11)

    背景 我们或多或少都使用过各式各样的富文本编辑器,其中有一个很方便功能,复制一张图片然后粘贴进文本框,这张图片就被上传了,那么这个方便的功能是如何实现的呢? 原理分析 提取操作:复制=>粘贴=& ...

  3. ckeditor 实现ctrl+v粘贴图片并上传、word粘贴带图片

    公司做的项目需要用到文本上传功能. Chrome+IE默认支持粘贴剪切板中的图片,但是我要粘贴的文章存在word里面,图片多达数十张,我总不能一张一张复制吧? 我希望打开文档doc直接复制粘贴到富文本 ...

  4. js实现ctrl+v粘贴并上传图片

    前端页面: <textarea class="scroll" id="text" placeholder="在此输入...">& ...

  5. wangEditor实现ctrl+v粘贴word图片并上传

    很多时候我们用一些管理系统的时候,发布新闻.公告等文字类信息时,希望能很快的将word里面的内容直接粘贴到富文本编辑器里面,然后发布出来.减少排版复杂的工作量. 下面是借用百度doc 来快速实现这个w ...

  6. c# TextBox只允许输入数字，禁用右键粘贴，允许Ctrl+v粘贴数字

    TextBox只允许输入数字,最大长度为10 //TextBox.ShortcutsEnabled为false 禁止右键和Ctrl+v private void txtNumber_KeyPress( ...

  7. 2019-3-22c# TextBox只允许输入数字，禁用右键粘贴，允许Ctrl+v粘贴数字

    TextBox 禁止复制粘贴 ShortcutsEnabled =false TextBox只允许输入数字,最大长度为10 //TextBox.ShortcutsEnabled为false 禁止右键和 ...

  8. umeditor实现ctrl+v粘贴word图片并上传

    图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码目前限chrome浏览器使用首先以um-editor的二进制流保存为例:打开umeditor.js,找到UM ...

  9. ueditor实现ctrl+v粘贴word图片并上传

    图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码 目前限chrome浏览器使用,但是项目要求需要支持所有的浏览器,包括Windows和macOS系统.没有办 ...

随机推荐

  1. Java之线程池和Lambda表达式

    线程池和lambda表达式 学习线程池和lambda表达式的理解 补充一个知识点(单例设计模式) 在多线程中,我们只需要一个任务类,为了防止创建多个任务类,这个时候就需要用到单例模式,单例模式有两种设 ...

  2. 解题：POI 2011 Dynamite

    题面 从零开始的DP学习系列之叁 树形DP的基本(常见?)思路:先递归进儿子,然后边回溯边决策,设状态时常设$dp[x]$表示以$x$为根的子树中(具体分析算不算$x$这个点)的情况 显然的二分答案, ...

  3. python之旅：面向对象之多态、多态性

    一 多态 多态指的是一类事物有多种形态 eg:动物有多种形态:猫,狗,猪 class Animal: #动物类 def eat(self): #吃 pass def drink(self): #喝 p ...

  4. python之旅：面向对象之继承与派生

    一 初识继承 编写类时,并非总要从空白开始.如果你要编写的类正好是另一个现成类的特殊版本,可使用继承来减少代码冗余,子类会“遗传”父类的属性,从而解决代码重用问题 什么是继承 继承是一种创建新类的方式 ...

  5. HOJ 13101 The Triangle Division of the Convex Polygon（数论求卡特兰数（模不为素数））

    The Triangle Division of the Convex Polygon 题意:求 n 凸多边形可以有多少种方法分解成不相交的三角形,最后值模 m. 思路:卡特兰数的例子,只是模 m 让 ...

  6. unity抗锯齿（Antialiasing）

    目前知道的有两种方式,下面依次介绍 一.系统菜单设置法. 这样只能简单去锯齿,要想效果特别明显,看下面的脚本吧. 二.为摄像机挂上一个去锯齿的系统脚本 导入后Assets资源下多了一个包 找到这个脚本 ...

  7. GO_06：GO语言基础之struct

    结构struct 1. Go 中的struct与C中的struct非常相似,并且Go没有class 2. 使用 type <Name> struct{} 定义结构,名称遵循可见性规则(即首 ...

  8. Tomcat权威指南-读书摘要系列4

    4. Tomcat的性能调校 测量Web服务器的性能 测试负载的工具 Apache Benchmark Siege JMeter

  9. Java基础-IO流对象之字符类（FileWrite与FileReader）

    Java基础-IO流对象之字符类(FileWrite与FileReader) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.常见编码简介 1>ASCII 我们知道计算机是 ...

  10. Java基础-程序流程控制第一弹（分支结构/选择结构）

    Java基础-程序流程控制第一弹(分支结构/选择结构) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.if语句 1>.if语句的第一种格式 if(条件表达式){ 语句体: ...