裝WebUploader，想實現(xiàn)信息修改的功能，就是一條記錄可能有多個圖片字段，每個字段又有可能有多張圖片。當(dāng)修改記錄的時候，需要把圖片字段中已經(jīng)有的圖片顯示出來，實現(xiàn)旋轉(zhuǎn)角度的功能，最重要的是實現(xiàn)刪除功能。
實現(xiàn)思路：
針對一個圖片字段，服務(wù)器返回多個已經(jīng)上傳的圖片
遍歷返回的多個地址，請求每個圖片的字節(jié)流數(shù)據(jù)
將字節(jié)流數(shù)據(jù)轉(zhuǎn)換為DataUrl，再將DataUrl轉(zhuǎn)成Blob，這個Blob對象就是webuploader#addFile方法可以接受的對象了
實現(xiàn)代碼（來自網(wǎng)絡(luò)）
根據(jù)圖片URL直接獲取到DataUrl
function convertImgToDataURLviaCanvas(url, callback, outputFormat){
? ? var img = new Image();
? ? img.crossOrigin = 'Anonymous';
? ? img.onload = function(){
? ? ? ? var canvas = document.createElement('CANVAS');
var ctx = canvas.getContext('2d');
var dataURL;
? ? ? ? canvas.height = this.height;
? ? ? ? canvas.width = this.width;
? ? ? ? ctx.drawImage(this, 0, 0);
? ? ? ? dataURL = canvas.toDataURL(outputFormat);
? ? ? ? callback(dataURL);
? ? ? ? canvas = null;
};
img.src = url;
}function convertFileToDataURLviaFileReader(url, callback){
var xhr = new XMLHttpRequest();
xhr.responseType = 'blob';
xhr.onload = function() {
var reader? = new FileReader();
reader.onloadend = function () {
callback(reader.result);
}
reader.readAsDataURL(xhr.response);
};
xhr.open('GET', url);
xhr.send();
}
上面兩個方法來自 http://jsfiddle.net/handtrix/YvQ5y/
DataURL轉(zhuǎn)Blob
function dataURLtoBlob(dataurl) {
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {type:mime});
}
上面的方法來自http://blog.csdn.net/cuixiping/article/details/45932793
