最近的項(xiàng)目都有拍照上傳的功能，所以把這個(gè)功能單獨(dú)抽出來總結(jié)積累一下，以便以后復(fù)用。
功能：圖片選取，滑動預(yù)覽，刪除，異步上傳（壓縮）
工具：Swiper插件
代碼：https://github.com/jackLeong/imagePicker

圖片壓縮上傳代碼：

function send(){
var url_send = "http://......";
var scale = 3; //縮放比例
$('.forIndex img').each(function(index,ele){
        var canvas = document.createElement("canvas");
        var image = this;
         var w = image.naturalWidth;
         var h = image.naturalHeight
        canvas.width = w/scale;
        canvas.height = h/scale; 
        // 坐標(biāo)(0,0) 表示從此處開始繪制，相當(dāng)于偏移。 
        canvas.getContext("2d").drawImage(image,0,0,w,h,0,0,w/scale,h/scale); 
        var dataURL = canvas.toDataURL("image/png");
        var blob = convertBase64UrlToBlob(dataURL);
        var file = new File([blob],(new Date()).valueOf()+'.png',{type:"image/png"});
        var formData = new FormData();
        formData.append('imgData',file);
        
        $.ajax({
          url: url_send,
          type: 'POST',
          data: formData,
          cache: false,
          async:true,
          processData: false,
         contentType: false,
          success: function (data) {
          },
          error: function () {
          }
        });
    });
}

function convertBase64UrlToBlob(urlData){
    var decoded=window.atob(urlData.split(',')[1]);   //去掉Data URL的頭部信息，window.atob解碼base64,返回字符串(unicode字符串)對象
    debugger;
    console.log(decoded);
    var typedArr = new ArrayBuffer(decoded.length);   //開辟字節(jié)數(shù)大小為decoded.length的類型化數(shù)組,相當(dāng)一片內(nèi)存空間
    var uint8Arr = new Uint8Array(typedArr);          //創(chuàng)建一個(gè)指向typedArr的Uint8視圖
    for(var i=0;i<decoded.length;i++){
        uint8Arr[i] = decoded.charCodeAt(i);          //charCodeAt返回unicode字符編碼, uint8Arr,typeArr指向同一地址,
    }
    return new Blob( [uint8Arr] , {type : 'image/png'});
}

效果：

01.png