装WebUploader，想实现信息修改的功能，就是一条记录可能有多个图片字段，每个字段又有可能有多张图片。当修改记录的时候，需要把图片字段中已经有的图片显示出来，实现旋转角度的功能，最重要的是实现删除功能。
实现思路：
针对一个图片字段，服务器返回多个已经上传的图片
遍历返回的多个地址，请求每个图片的字节流数据
将字节流数据转换为DataUrl，再将DataUrl转成Blob，这个Blob对象就是webuploader#addFile方法可以接受的对象了
实现代码（来自网络）
根据图片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转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
