图片上传

装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