將圖片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});
  }