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 ...
随机推荐
- springboot引入springSecurity无法post提交表单
参考https://blog.csdn.net/shawearn1027/article/details/71119587 表单中添加<input type="hidden" ...
- org.apache.catalina.core.StandardContext.listenerStart Error configuring application listener of class org.springframework.web.context.ContextLoaderListener java.lang.ClassNotFoundException
使用Intelij Idea时,报错如下: org.apache.catalina.core.StandardContext.listenerStart Error configuring appli ...
- 转 git push 提示 Everything up-to-date
git 还没有分支,需要指定一个($ git remote -v),就可以push了 第一步:$ git remote -v 第二步:$ git branch 转载链接: http://blog.cs ...
- centos一键安装lnmp成功后无法访问ip(解决办法)
自己搞了个服务器 (我的服务器网络类型是 专有网络)如下图点击 配置规则 进入到 进.出端口规则配置 点击添加安全组规则 如图所配置 添加完成后 就如下面所示 (配置完成后 通过ip就已经可以访问了 ...
- 16进制string转成int
http://blog.csdn.net/wl1524520/article/details/25706521
- [SoapUI] 通过context获取response并解析里面的某个字段的值
import com.eviware.soapui.support.GroovyUtils def groovyUtils = new GroovyUtils( context ) def realI ...
- 电商类Web原型制作分享-IKEA
IKEA是一个家居整合大型零售商,属于电商类官网.电商以展示商品.售后服务.购物流程为主.根据网站的图文方式排版,主导航栏使用的标签组,区域导航栏使用的是垂直选项卡,实现下拉弹出面板交互的功能. 本原 ...
- 设计神器 - 摹客设计系统上线了 | 晒出你的设计规范,赢iPad Pro!
在国内,设计规范也许还是个不太常用的概念,但是如果你正好有参与互联网公司的产品设计,你应该早就已经体会到设计规范的重要性了.UI设计师总是要花费大量的时间和精力向开发描述一大堆设计细节,但是产品最后呈 ...
- [转]一个CMake编译问题的解决过程
问题的提出 公司的一个power-pc平台的产品,有个协议进行了修改,过程中出现了比较奇怪的情况.直接将修改后的动态库下载到设备上(原始设备是有文件系统和其他的依赖文件的,相当于部分更新应用),设备和 ...
- dj cookie & session组件
Cookie概述 什么叫Cookie Cookie翻译成中文是小甜点,小饼干的意思.在HTTP中它表示服务器送给客户端浏览器的小甜点.其实Cookie是key-value结构,类似于一个python中 ...