基本原理是将剪贴板中的图片二进制数据转为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>
参考资料：