JavaScript從剪切板中獲取圖片並在光標處插入
edit_content_text.addEventListener('paste', function (ev) {
var clipboardData, items, item;
console.log(ev.clipboardData.items[0].type)
if (ev && (clipboardData = ev.clipboardData) && (items = clipboardData.items) && (item = items[0]) && item.kind == 'file' && item.type.includes("image")) {
//blob就是剪贴板中的二进制图片数据
var blob = item.getAsFile();
//定义fileReader读取完数据后的回调
var reader = new FileReader();
reader.onload = function () {
//result应该是base64编码后的图片
var sHtml = '<img src="' + event.target.result + '">';
if (focus === true) {
var selection = getSelection()
var range = selection.getRangeAt(0);
var img = document.createElement('img');
img.src = event.target.result;
range.insertNode(img);
// edit_content_text.innerHTML = edit_content_text.innerHTML + sHtml;
}
//_this.pasteHTML(sHtml);//这里应该是关于光标和插入代码的具体操作
}
//用fileReader读取二进制图片,完成后会调用上面定义的回调函数
reader.readAsDataURL(blob);
//return false;
}
});
JavaScript從剪切板中獲取圖片並在光標處插入的更多相关文章
- 浏览器中用JavaScript获取剪切板中的文件
本文转自我的个人网站 , 原文地址:http://www.zoucz.com/blog/2016/01/29/get-file-from-clipboard/ ,欢迎前往交流讨论 在网页上编辑内容 ...
- wpf 复制/剪切到本地系统剪切板中以供右键粘贴用
原文:wpf 复制/剪切到本地系统剪切板中以供右键粘贴用 http://www.cnblogs.com/yhdkzy/archive/2012/11/27/2790655.html /// & ...
- Winform中实现将照片剪贴到系统剪切板中(附代码下载)
场景 效果 点击剪切按钮 点击粘贴按钮 注: 博客主页: https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书.教程推送与免 ...
- python学习记录_中断正在执行的代码,执行剪切板中的代码,键盘快捷键,魔术命令,输入和输出变量,记录输入和输出变量_
2018-03-28 00:56:39 中断正在执行的代码 无论是%run执行的脚本还是长时间运行的命令ctrl + cIn [1]: KeyboardInterrupt 执行剪切板中的代码 ctrl ...
- Mac剪切板中的PNG保存到文件swift
SwiftGG 教程大全 中文翻译 命令行工具开发教程 Line Programs on macOS Tutorial swift4,较详细 Swift基础中需要注意的点 NSPasteboard M ...
- JS访问剪切板中的图片
google出来一个html2canvas,它利用canvas来渲染读取的DOM树,也就是说它只能截取document里的内容,如果要像qq截图那样,应该怎么做?用过百度的Ueditor编辑器的朋友都 ...
- Javascript操作剪切板数据(支持IE、Chrome、360、搜狗),亲测!
clipboarddata只能在IE浏览器中使用,在chrome下会提示对象未定义!以下的方法支持IE.Chrome.360.搜狗等浏览器,其它浏览器还未验证. <!DOCTYPE html&g ...
- 让input支持 ctrl v上传粘贴图片? 让input支持QQ截图或剪切板中的图像数据(Java实现保存)
原理:监听粘贴 → 获取粘贴内容 → 将内容上传 → 抓取后返回替换至input 我们在生产中用到的界面: 测试地址 http://sms.reyo.cn 用户名:aa 密码:123456 以下是PH ...
- JavaScript实现无刷新评论及在IE下的剪切板访问(学习)
1.无刷新评论 tips: appendChild:将新元素作为父元素的最后一个子元素进行添加. insertBefore:在一个指定的子节点之前插入一个节点 实现: <!DOCTYPE htm ...
随机推荐
- 破解版ps
http://www.sdifen.com/adobe-photoshop-cc.html
- css3文字截断
width:200px; height:14px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; text-overflow ...
- Visual Event查看页面相关绑定事件
页面相关绑定的事件比较复杂,在不熟悉的情况下很难找到相关逻辑的位置,所以希望借助工具来帮自己理清相关事件的脉络走向. 浏览器 工具 chrome( 58.0.3029.110) Visual Even ...
- phpcms如何给已有的模块添加新功能?
phpcms如何给已有的模块添加新功能? 方法一:直接在模块里的控制器文件中添加功能. 不建议使用此方法,因为一旦phpcms升级,有可能会覆盖模块中的文件, 导致你添加的功能丢失. 方法二:新建一个 ...
- loadrunner--常用函数列表【转】
1. Intweb_reg_save_param("参数名","LB=左边界","RB=右边界",LAST);/注册函数,在参 ...
- BZOJ 1211[HNOI2004]树的计数 - prufer数列
描述 一个有n个结点的树,设它的结点分别为v1, v2, …, vn,已知第i个结点vi的度数为di,问满足这样的条件的不同的树有多少棵.给定n,d1, d2, …, dn,编程需要输出满足d(vi) ...
- Debian 利用 iso 镜像完全离线更新 apt-cdrom
1 目的 在日常的 linux 服务器管理中,出于某些考虑,服务器要求与 Internet 完全隔离. 这使得我们对系统的更新和软件包的升级感到无比头疼. 下面介绍的这种方法,采用 ISO 文件,进行 ...
- 利用HBuilder打包前端开发webapp为apk
转载 标签: apk / 打包 / vue 现在的前端开发可谓是,百花齐放啦,什么都可以做,只有想不到没有做不到的,今天就简单的介绍用vue,ng或者是react开发的单页应用如何打包为apk,在移动 ...
- [转]docker 基本原理及快速入门
版权声明:原创作品, 来自海牛部落-青牛,http://hainiubl.com/topics/13 什么是docker Docker 是一个开源项目,诞生于 2013 年初,最初是 dotCloud ...
- 模型参数_grid
from sklearn import datasetsfrom sklearn.model_selection import train_test_splitfrom sklearn.preproc ...