Posted in Javascript onOctober 17, 2016
chrome有很多人性化的API，比如拖拽， 比如图片可以转化为base64等；
比如知乎上面的回复中可以直接黏贴图片， 就不需要手动点击图片上传按钮， 选择图片， 确认上传等等； 知乎参考地址：打开
让编辑器支持word的复制黏贴， 其中图片会转化为base64编码， 如果是通过远程打开这个静态页， 黏贴word文档的时候， 图片不会黏贴进来， 因为远程地址无法访问本地磁盘的绝对路径， 如果把下面代码保存成静态界面打开， 那么word中的图片都可以看见， 而且都会被转化为base64编码；
编辑器支持截屏的黏贴；
让编辑器支持图片直接拖拽， 直接拖拽即可添加图片， 功能更加强大， 而且图片也是base64编码；
使用的话这new Edit()， 参数为一个可编辑的元素， 比如有contenteditable属性的div或者iframe元素等:
<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>
很多网上的编辑器里 对图片的支持单一， 都会考虑IE6， IE7， ff， chrome， 各种兼容问题；
这个解决方案适合基于chrome内核的浏览器, FF的兼容没有处理， 因为所有的图片数据都是基于base64， 图片就没有上传这一说法了，图片都变成了字符串， 不过这个有个劣势就是每一次提交的数据都会比较大；
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。
让编辑器支持word复制黏贴、截屏的js代码
- Author -
方方和圆圆声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@