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， 圖片就沒有上傳這一說法了，圖片都變成了字符串， 不過這個有個劣勢就是每一次提交的數據都會比較大；
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。