将图片url转换为base64与file对象

通常，在做图片上传的时候，一般以file对象的形式传递。后端将图片上传服务器之后，当前端再次请求数据，拿到的图片为http开头的url。通过此url一般能满足页面展示的需求，如果需要再将此图片传送给后端，也能满足。但在图片在编辑更换后再次传送，且后端需要file对象接收时，单纯的url将不能满足需求，则需要将url地址转换为file对象。

简单做一个demo，以作后期回顾。

html部分

<div style="width:400px;height:400px;background: #ccc;margin: 0 auto;margin-top:50px;">    
    <div class="imgBox" style="width:300px;height:150px;background:#bbb;margin-bottom:30px">
         <img id="demoImg" src=""/>
    </div>
    <div class="canvasBox" style="width:300px;height:150px;background:#bbb">
         <canvas id="demoCanvas"></canvas>
    </div>
</div>

js部分

var fileUrl = 'http://pic27.nipic.com/20130222/10741105_154139938000_2.jpg'  
  function fileProcess(fileUrl){
    var demoImg = document.getElementById("demoImg");
    demoImg.src = fileUrl
        var img = fileUrl;
    var image = new Image();
    // 给img加上随机值一部分情况下能解决跨域
    // image.src = img + '?time=' + new Date().valueOf();
    image.src = img;
    // 允许跨域操作
    image.setAttribute("crossOrigin",'anonymous');
    image.onload = function(){
      var base64 = getBase64Image(image);
      console.log(base64)
      var newFile = dataURLtoFile(base64,'img111');
      console.log(newFile)
      demoImg.src=base64.dataURL;
      var blob = convertBase64UrlToBlob(base64);
      console.log(blob);
    }
  }

// 将url转换为base64

  function getBase64Image(img) {
    var demoCanvas = document.getElementById("demoCanvas");
    demoCanvas.width = img.width;
    demoCanvas.height = img.height;
    var ctx = demoCanvas.getContext("2d");
    ctx.drawImage(img, 0, 0, 300, 150);
    var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
    var dataURL = demoCanvas.toDataURL("image/"+ext);
    return {
      dataURL: dataURL,
      type: "image/"+ext
    };
  }

// 将url转换为blob

function convertBase64UrlToBlob(base64){ 
    var urlData =  base64.dataURL;
    var type = base64.type;
    var bytes = window.atob(urlData.split(',')[1]); //去掉url的头，并转换为byte
    //处理异常,将ascii码小于0的转换为大于0  
    var ab = new ArrayBuffer(bytes.length);  
    var ia = new Uint8Array(ab);  
    for (var i = 0; i < bytes.length; i++) {  
        ia[i] = bytes.charCodeAt(i);  
    }  
    return new Blob( [ab] , {type : type});  
  }

//将base64转换为file文件

 function dataURLtoFile(dataurl, filename) {
    var arr = dataurl.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 File([u8arr], filename, {type:mime});
  }