问题描述

封装WebUploader，想实现信息修改的功能，就是一条记录可能有多个图片字段，每个字段又有可能有多张图片。当修改记录的时候，需要把图片字段中已经有的图片显示出来，实现旋转角度的功能，最重要的是实现删除功能。

实现思路：

  1. 针对一个图片字段，服务器返回多个已经上传的图片
  2. 遍历返回的多个地址，请求每个图片的字节流数据
  3. 将字节流数据转换为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});
        }