js实现ctrl+v粘贴图片或是截图
浏览器环境：谷歌浏览器
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粘贴图片或是截图的更多相关文章
- js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)【转载】
我们或多或少都使用过各式各样的富文本编辑器,其中有一个很方便功能,复制一张图片然后粘贴进文本框,这张图片就被上传了,那么这个方便的功能是如何实现的呢? 原理分析 提取操作:复制=>粘贴=> ...
- js实现ctrl+v粘贴上传图片(兼容chrome，firefox，ie11)
背景 我们或多或少都使用过各式各样的富文本编辑器,其中有一个很方便功能,复制一张图片然后粘贴进文本框,这张图片就被上传了,那么这个方便的功能是如何实现的呢? 原理分析 提取操作:复制=>粘贴=& ...
- ckeditor 实现ctrl+v粘贴图片并上传、word粘贴带图片
公司做的项目需要用到文本上传功能. Chrome+IE默认支持粘贴剪切板中的图片,但是我要粘贴的文章存在word里面,图片多达数十张,我总不能一张一张复制吧? 我希望打开文档doc直接复制粘贴到富文本 ...
- js实现ctrl+v粘贴并上传图片
前端页面: <textarea class="scroll" id="text" placeholder="在此输入...">& ...
- wangEditor实现ctrl+v粘贴word图片并上传
很多时候我们用一些管理系统的时候,发布新闻.公告等文字类信息时,希望能很快的将word里面的内容直接粘贴到富文本编辑器里面,然后发布出来.减少排版复杂的工作量. 下面是借用百度doc 来快速实现这个w ...
- c# TextBox只允许输入数字，禁用右键粘贴，允许Ctrl+v粘贴数字
TextBox只允许输入数字,最大长度为10 //TextBox.ShortcutsEnabled为false 禁止右键和Ctrl+v private void txtNumber_KeyPress( ...
- 2019-3-22c# TextBox只允许输入数字，禁用右键粘贴，允许Ctrl+v粘贴数字
TextBox 禁止复制粘贴 ShortcutsEnabled =false TextBox只允许输入数字,最大长度为10 //TextBox.ShortcutsEnabled为false 禁止右键和 ...
- umeditor实现ctrl+v粘贴word图片并上传
图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码目前限chrome浏览器使用首先以um-editor的二进制流保存为例:打开umeditor.js,找到UM ...
- ueditor实现ctrl+v粘贴word图片并上传
图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码 目前限chrome浏览器使用,但是项目要求需要支持所有的浏览器,包括Windows和macOS系统.没有办 ...
随机推荐
- NOI2010~NOI2018选做
[NOI2010] [NOI2010]海拔 高度只需要0/1,所以一个合法方案就是一个割,平面图求最小割. [NOI2010]航空管制 反序拓扑排序,每次取出第一类限制最大的放置,这样做答案不会更劣. ...
- BZOJ 2938: [Poi2000]病毒
2938: [Poi2000]病毒 Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 693 Solved: 360[Submit][Status][Di ...
- 解题：POI 2011 Strongbox
首先洛谷的题面十分的劝退(至少对我这个菜鸡来说是这样),我来解释一下(原来的英文题面): 有一个有若干个密码(每个密码都可以开箱子)的密码箱,密码是在$0$到$n-1$的数中的,且所有的密码都满足一个 ...
- 【Asp.net入门11】第一个ASP.NET 应用程序-创建摘要视图
目前已经完成了应用程序的基本结构单元,受邀者也能够做出回复.这一节将添加一个支持组件,以显示收到的回复摘要,以便用户的朋友了解谁会参加晚会,并做出适当安排.在Solution Explorer中右键单 ...
- linux命令总结之traceroute命令
通过traceroute我们可以知道信息从你的计算机到互联网另一端的主机是走的什么路径.当然每次数据包由某一同样的出发点(source)到达某一同样的目的地(destination)走的路径可能会不一 ...
- Spring知识总结
一.Spring简述 Spring是一个分层的JavaSE/EEfull-stack(一站式)轻量级开源框架,Spring致力于提供一种方法管理你的业务对象,Spring的主要目的是使JavaE ...
- Object-C使用类静态方法创建对象时容易内存泄露
1.所谓使用类的静态方法创建对象,就是指使用类名调用一次它的静态方法(非显式调用alloc)便可以得到一个新建的对象,比如下面两个例子: NSString* str1 = [NSString stri ...
- NOI2006 最大获利（最大权闭合子图）
codevs 1789 最大获利 2006年NOI全国竞赛 时间限制: 2 s 空间限制: 128000 KB 题目描述 Description 新的技术正冲击着手机通讯市场,对于各大运营商来 ...
- IIS8.5关于“ 配置错误 不能在此路径中使用此配置节”的解决办法
今天刚安装好IIS8.5, 我的系统是win8.1 enterprise版本. 建了一个简单的页面准备调试,却发现了这个错误: 详细错误信息模块 IIS Web Core 通知 BeginReques ...
- nginx反向代理下没有获取到正确的clientIP问题发散
问题背景: 在使用nginx服务器NginxA 来反向代理服务 WebAPIA,WebAPIA中要获取ClientIP,结果获取到的IP为NginxA的, 于是引出了以下的一连串概念... 首先使用X ...