让Web页面中的编辑器支持黏贴或直接拖拽来添加图片
基本原理是将剪贴板中的图片二进制数据转为Base64编码
代码：
<html>
<head>
</head>
<body>
<script src="http://cdn.bootcss.com/jquery/1.9.0/jquery.js">
</script> <div id="edit" contenteditable="true" style="width:400px;height:400px;border:1px solid #f00"> </div> <script>
function Edit( editEl ) {
editEl = $(editEl); $(editEl).bind("paste", clipFn); function clipFn(ev) { //把剪贴板中的img通过canvas中专为base64字符串;
var canvas = document.createElement("canvas");
var context = canvas.getContext("2d"); //从word拷贝时候会得到text/html数据;
var html = $(ev.originalEvent.clipboardData.getData("text/html"));
html.find("img").each(function () { var img = document.createElement("img");
var src = $(this).attr("src");
//.replace(/\\/gi,"\/");
var _this = this;
img.src = src; img.onload = function () {
canvas.width = img.width;
canvas.height = img.height;
context.drawImage(img, 0, 0, img.width, img.height);
var dataBase64 = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
$("img").each(function (index, el) {
//匹配图片;
if ($(this).attr("src").replace(/[\/\\]/g,"") === src.replace(/[\/\\]/g,"")) {
el.src = dataBase64;
}
;
}
); img.onerror = function() {
console.log("图片加载失败");
}
; img.onload = null;
}
; }
); //如果通过截图或者复制图片的方式会得到 type为"imgage"的图片;
var ele = ev.originalEvent.clipboardData.items;
for (var i = 0; i < ele.length; ++i) {
if ( ele[i].kind == 'file' && ele[i].type.indexOf('image/') !== -1 ) { var blob = ele[i].getAsFile();
readBlobAsDataURL(blob, function( base64 ) { var img= document.createElement('img');
img.setAttribute('src', base64); editEl.append(img);
;
}
);
//阻止默认事件, 避免重复添加;
ev.originalEvent.preventDefault();
}
;
}
;
}
; //绑定拖拽事件
//要给个响应
editEl.bind("dragover", function() {
return false;
}
); //触发事件的响应
editEl.bind("drop", function(ev) {
loadImage( ev.originalEvent.dataTransfer.files[0] , function( result ) {
editEl.append( "<img src="+result+" />" );
}
);
return false;
}
); // 加载 图像文件(url路径)
function loadImage(src, callback){
// 过滤掉 非 image 类型的文件
if(!src.type.match(/image.*/)){
if(window.console){
console.log("选择的文件类型不是图片: ", src.type);
}
else {
window.confirm("只能选择图片文件");
}
return;
} // 创建 FileReader 对象 并调用 render 函数来完成渲染.
var reader = new FileReader();
// 绑定load事件自动回调函数
reader.onload = function(e){
// 调用前面的 render 函数
callback(e.target.result);
}
;
// 读取文件内容
reader.readAsDataURL(src);
}
; function readBlobAsDataURL(blob, callback) {
var a = new FileReader();
a.onload = function(e) {
callback(e.target.result);
};
a.readAsDataURL(blob);
}
;
}
;
</script> <script>
new Edit("#edit");
</script>
</body>
</html>
参考资料：
让Web页面中的编辑器支持黏贴或直接拖拽来添加图片的更多相关文章
- php中调用这个功能可以在web页面中显示hello world这个经典单词
php程序写的时间长了,自然对他所提供的功能了如指掌,他所提供的一大堆功能,真是觉得很好用,但有时候会发现php也缺少一些功能,自己总是会产生为php添加一些自定义的功能的想法.久而久之,终于今天憋不 ...
- 关于在asp.net的web页面中的全局变量问题
在asp.net的web页面中是不是没有全局变量?有的,在Class类内部的都是,只不过在WebWofm程式中跟WinForm和Console程式有些区别,当页面刷新时,它们的值不会保持,依然会再次初 ...
- [置顶] 读取pdf并且在web页面中显示
读取pdf并且在web页面中显示 if (System.IO.File.Exists(f)) { Response.ContentType = "applicationpdf"; ...
- web页面中可以包含多个对象
# encoding=utf-8 #python 2.7.10 #xiaodeng #web页面中可以包含多个对象 #HTTP权威指南 10页 #应用程序完成一项任务时通常会发布多个http事务.如: ...
- 企业级监控软件Zabbix搭建部署之zabbix在WEB页面中的配置
企业级监控软件zabbix搭建部署之zabbix在WEB页面中的配置 企业级监控软件zabbix搭建部署之zabbix在WEB页面中的配置 关于安装请看 http://www.linuxidc.com ...
- FineBI如何在web页面中嵌入式集成
1. API嵌入集成 1.1 描述 FineBI是基于B/S架构的浏览器/服务器模式,现在用户开发的系统基本上趋向于B/S架构的浏览器/服务器模式,因此有些页面完全可以直接采用web页面嵌入式集成的简 ...
- web页面中快速找到html对应元素两种方法
一.第一种方法(通过先进入开发模式然后再去选择网页元素) 1.打开IE.Chrome.FireFox等,按 F12 键进入开发模式 2.在打开的控制窗口左上角有个 箭头 按钮,点击它之后,此时将鼠标 ...
- WEB页面中常见的四种控件的必须的测试
以下为常规的需求,除非需求有明确说明,如密码输入框中可以输入空格. 输入框 1. 为空,但页面中明确说明不能为空(带有星号或者只有这一个输入框),有以下两种情况: a. 不进行输入或者使其为空:焦 ...
- asp.net多线程在web页面中简单使用
需求:一个web页面 default.aspx 里面有两个控件GridView1,GridView2,通过两个线程分别加载绑定数据. 绑定GridView1:void BindCategory() ...
随机推荐
- Shelve Instance 操作详解 - 每天5分钟玩转 OpenStack（38）
Instance 被 Suspend 后虽然处于 Shut Down 状态,但 Hypervisor 依然在宿主机上为其预留了资源,以便在以后能够成功 Resume. 如果希望释放这些预留资源,可以使 ...
- x01.Weiqi.10: 死活问题
估计得不错,点目后,仅一个方法:UpdateMeshes5() 就完美解决了梅花六.刀把五.斗笠四.盘角曲四等死活问题.先来看看效果图: 其代码如下: void UpdateMeshes5(bool ...
- Linux基础命令操作
显示日期与时间:date date +%Y/%m/%d date +%H:%M 显示日历:cal 显示一整年(cal 2009) 显示一年中的某一个月 (cal [[month]] year) 例如 ...
- linux中inode、软链接、硬链接
1 软链接 linux中软链接理解成window中的快捷方式.创建软链接的命令 ln -s 源文文件或目录 目标文件或目录 2 硬链接 创建硬链接的命令如下 ln 源文文件或目录 目标文件或目录 3 ...
- 无需FQ，自建本地CDN，秒上StackOverFlow！
StackOverflow是一个面向程序员的技术问答平台.可是在不FQ的情况下,浏览StackOverflow是一件让人极不舒服的事情,常常需要等待数十秒页面才慢慢显示出来.本文我教大家一种能够流畅地 ...
- print输出格式总结
妈的,今天又被printf坑了一回...看来需要一次性总结书所有结果,省的又出现这样那样的麻烦.. #include<stdio.h> #include<string.h> # ...
- Non-convex MeshCollider with non-kinematic Rigidbody is no longer supported in Unity 5.
今天对一个书的模型加Rigidbody, MeshiCollider用的是mesh非UNITY自带的 出现 Non-convex MeshCollider with non-kinematic Rig ...
- apache 多站点配置
安装时可以选择gbk-gb2312的编码(我自己用utf-8). 2: 修改本机的hosts文件,如下: 示例:127.0.0.1 localhost127.0.0.1 ...
- IO（三）----序列流
SequenceInputStream 表示其他输入流的逻辑串联.它从输入流的有序集合开始,并从第一个输入流开始读取,直到到达文件末尾,接着从第二个输入流读取,依次类推,直到到达包含的最后一个输入流的 ...
- GO语言总结(1)——基本知识
1.注释(与C++一样) 行注释:// 块注释:/* ... */ 2.标识符 可以这么说,除了数字开头的不允许,符号开头的不允许,关键字不允许,其他的Unicode字符组合都可以.“_33”也可以是 ...