正文

js实现ctrl+v粘贴图片或是截图

黑黑哈哈  2022-02-14  799

关键词：

浏览器环境：谷歌浏览器

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 = 0; i < len; i++) {
                    console.log(items[i]);
                    if (items[i].type.indexOf("image") !== -1) {
                        //getAsFile() 此方法只是living standard firefox ie11 并不支持
                        blob = items[i].getAsFile();
                    }
                }
            }
        }
    })

View Code

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

3.1显示图片

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

  var blobUrl=URL.createObjectURL(blob);
       document.getElementById("imgNode").src=blobUrl;

View Code

效果图

　　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);

View Code

3.2上传到后台

　　3.2.1生成formData,这里生成formData

  var fd = new FormData();
                    fd.append("the_file", blob, 'image.png');

View Code

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 = 0; i < len; i++) {
                    console.log(items[i]);
                    if (items[i].type.indexOf("image") !== -1) {
                        //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[0]);
                    fd.append("the_file", blob, 'image.png');
                    //创建XMLHttpRequest对象
                    var xhr = new XMLHttpRequest();
                    xhr.open('POST','/image' );
                    xhr.onload = function () {
                        if ( xhr.readyState === 4 ) {
                            if ( xhr.status === 200 ) {
                                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>

xheditor实现ctrl+v粘贴图片并上传word粘贴带图片

tinymce是很优秀的一款富文本编辑器，可以去官网下载。https://www.tiny.cloud这里分享的是它官网的一个收费插件powerpaste的旧版本源码，但也不影响功能使用。http://blog.ncmem.com/wordpress/2019/08/07/umeditor%E7%B2%98%E8%B4%B4word%E5%9B%BE%E7%89%87/以v... 查看详情

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

这种方法是servlet，编写好在web.xml里配置servlet-class和servlet-mapping即可使用后台（服务端）java服务代码：（上传至ROOT/lqxcPics文件夹下）<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%@& 查看详情

xheditor实现ctrl+v粘贴word图片并上传

电脑怎么窗口截屏

...快捷键截图1.Win+shift+S：可以选择截图区域的大小，Ctrl+V粘贴在word、微信等应用里。能否直接编辑修改需视系统版本而定，1809版本可在截图后进行编辑修改（该快捷键其实是调用了OneNote里的截图功能）2.Prtsc：对整个页面截图，C... 查看详情

win10系统怎么用截图软件截图

如何将电脑截图保存到文件里面去呢？

...上，按下键盘上的【PrintScreen】或【Prtsc】键，移动鼠标实现全屏截图，接着任意打开文档，点击鼠标右键，在弹出的窗口选择【粘贴】，就可以看到电脑截图了，单击左上角的保存，即可将其保存至文档中。或者右键单击图片... 查看详情

如何用windows系统自带的截图工具截图

键盘上ctrl+v是啥快捷键？

...软件、Office或photoshop），按下键盘快捷键“Ctrl+V”将画面粘贴下来，最后保存为图形文件就可以了。扩展资料其他截屏方式：Ctrl+PrScrn使用这个组合键截屏，获得整个屏幕的图片Alt+PrScrn这个组合键截屏，获得当前窗口的图片其他... 查看详情

电脑键盘怎么截图

参考技术A电脑键盘怎么截图？1、实现电脑全屏截图：按下键盘中的PrintScrSysrq键，就可以实现。2、实现活动界面的截图：利用键盘上的Alt+PrintScreenSysRq键。3、截图的内容实际是保存在了电脑的粘贴板上，我们可以打开word文档。4... 查看详情

电脑怎么全屏截图

...像编辑软件，按下“Ctrl”和“V”键，将剪贴板中的内容粘贴到画布中。4、对截图进行必要的编辑，比如裁剪、调整大小等。5、保存截图，选择“文件”菜单中的“另存为”选项，选择保存的文件格式和保存的位置，即可保存... 查看详情

xshell复制粘贴（ctrl+c，ctrl+v）配置

在使用Windows一般使用ctrl+c，ctr+v实现粘贴复制，通过Xshell连接Linux时，可以通过设置实现两种环境的复制粘贴，从而提高工作效率（比如按照文档操作，直接复制代码到Linux，比手敲快很多）... 查看详情

在windows中粘贴命令的快捷键是ctrl+v

粘贴的快捷键是“Ctrl+V”。剪切：将图文字选中后，通Ctrl+X命令，将图片或文字裁切下来，放到电脑剪切板上，再通过Ctrl+V粘贴到所要粘贴的位置。裁切文字的过程称为剪切。复制粘贴，指将一个文本或一段文字复制后移动到另... 查看详情

word中怎样同时粘贴图片和文字

...菜单，而是使用键盘上的“复制”组合键：Ctrl+C在Word中粘贴时也不要用鼠标点击“粘贴”，而是使用键盘上的“粘贴”组合键：Ctrl+V。举例：以下某网页中的部分文字和图片已被选中，这时按下Ctrl+C进行复制。然后打开Word文档... 查看详情

ubuntu部分截图

ctrl+shift+PrintScreen自由选区截图，之后ctrl+v可粘贴到blog 查看详情

ubuntu部分截图

ctrl+shift+PrintScreen自由选区截图，之后ctrl+v可粘贴到blog 查看详情

gvim在编辑（插入）模式下怎么样才能使用ctrl+v和ctrl+c和ctrl+x，来实现剪切复制粘贴。

我现在可以在可视模式下实现以上功能，但是在编辑模式下一按ctrl+v，就会自动插入“^”这个符号，如果粘贴。如何修改它的配置文件呢。不会意思，打错字了，上文应该是“就会自动插入“^”这个符号，无法粘贴”。参考技... 查看详情

电脑上的数据怎么截图发到邮件上

...需要的范围后，内容变亮，双击复制截图到剪贴板，等待粘贴。8，回到好友聊天窗口，点击鼠标右键，选择粘贴；或者按键盘Ctrl+V粘贴到聊天窗口。9，击窗口的发送按钮。这样截图就成功发送给朋友的qq了。参考技术A键盘上，... 查看详情

proe截图快捷键jpg格式

...开“开始→所有程序→附件→画图”，点击选中“编辑→粘贴”或Ctrl+V。屏幕截图就都在画板上。3、点选左边工具栏上面的“选定”按钮，按钮图案是一个长方形的虚线的框，框选截图上需要的部分，点选“编辑→复制（或剪... 查看详情