移動端圖片裁剪上傳—jQuery.cropper.js

jQuery.cropper.js是一款使用簡單且功能強大的圖片剪裁jQuery插件。該圖片剪裁插件支持圖片放大縮小，支持圖片旋轉，支持觸摸屏設備，支持canvas，並且支持跨瀏覽器使用。

一、移動端獲取本地相冊兼容

安卓：<input type="file" accept="image/*" capture="camera" >

ios：<input type="file" accept="image/*">

<input type="file" accept="image/*" capture="camera" class="js_upFile">

 

var agent = navigator.userAgent.toLowerCase();
if(agent.indexOf('iphone') != -1  || agent.indexOf('ipad') != -1 ){
      $('.js_upFile').removeAttr("capture");
}

二、判斷圖片格式

function check_Image_Format(value)
{
      var regexp = new RegExp("(.JPEG|.jpeg|.JPG|.jpg|.PNG|.png|.svg|.gif|.bmp)$",'g');
      return regexp.test(value);
}

三、獲取圖片文件的url

// Blob URL格式
function get_File_Url(file) {
      var url == null;
      if (window.createObjectURL) {
            url = window.createObjectURL(file) ;
      } else if (window.URL) {
            url = window.URL.createObjectURL(file) ;
      } else if (window.webkitURL) {
            url = window.webkitURL.createObjectURL(file) ;
      }
      return url ;
}

// Data URL格式（base64編碼）
function get_File_Url(file) {
　　　　var reader = new FileReader(); 
　　　　reader.readAsDataURL(file);
　　　　reader.onload = function(e) { 
　　　　　　　...
　　　　　　　previewImg.attr("src",e.target.result);　　
　　　　} 
}

 

四、圖片預覽

圖片預覽容器：<img src="" alt="" id="previewImg" />

$('.js_upFile').change(function () {
      if(!check_Image_Format(this.value)){
              alert('格式錯誤！');
              return;
      }
      var objUrl = get_File_Url(this.files[0]);
      if (objUrl)
      {
              //預覽圖片
       　　　　var previewImg = $("#previewImg");
              previewImg.attr("src",objUrl);
　　　　}
}

五、cropper.js裁剪

//初始化裁剪插件cropper.js
 previewImg.cropper({
　　　　dragMode: 'move',//拖拽模式
       aspectRatio: 1,//設置剪裁容器的比例
       viewMode: 1//視圖模式
});
cropper = previewImg.data('cropper').getCroppedCanvas();

獲取到canvas繪制的剪裁圖像之后，你可以直接將canvas作為圖片顯示，或使用 canvas.toDataURL() 方法獲取圖像的數據鏈接（base64格式），或者使用 canvas.toBlob() 方法獲取一個blob。

六、上傳圖片

1、通過ajax上傳圖片，需要利用 FormData 對象：

var fd = new FormData();
fd.append('uploadfile', file);
$.ajax({
　　　　url: '',
       type: 'post',
       data: fd,
       cache: false,
       processData: false,
       contentType: false
}).then(function(res){
　　　　...
});

2、通過form上傳圖片：

<form action="" method="" enctype="multipart/form-data">
　　　　...
</form>

注意：裁剪完圖片后（圖片上傳成功、或者取消）需要銷毀已經生成的cropper實例，否則一直存在於裁剪框內影響下一張圖片的裁剪：$("#previewImg").cropper('destroy');

七、圖片轉化為文件

最后一個重點就是如何將已經裁剪好的圖片轉化為一個文件呢？上面已經通過插件得到了canvas繪制的剪裁圖像，需要進行一系列轉化形成我們最終需要的文件。

1、通過 canvas.toDataURL() 方法獲取圖像的數據鏈接（base64格式），然后將 base64編碼轉成file文件；

function base64_To_File(b64Data, filename) {
　　　　var block = b64Data.split(';');
       var contentType = block[0].split(':')[1];
       var data = block[1].split(',')[1];
　　　　var len = data.length;
       var u8arr = new Uint8Array(len);
       for(var i = 0; i < len; i++){
       　　　　u8arr[i] = data.charCodeAt(i);
       }
       return new File([u8arr], filename, {type: contentType});
}

但是這種方法ios低版本不兼容，最好的方法是：base64——>blob ——> file；

2、base64——>blob ——> file

function base64_To_File(b64Data, filename) {
　　　　var block = b64Data.split(';');
       var contentType = block[0].split(':')[1];
       var data = block[1].split(',')[1];
　　　　var len = data.length;
       var u8arr = new Uint8Array(len);
       for(var i = 0; i < len; i++){
       　　　　u8arr[i] = data.charCodeAt(i);
       }
       var blob = new Blob([u8arr], {type: contentType});
       return new File([blob], filename , {type: contentType});
}

3、通過 canvas.toBlob(function(blob){console.log(blob);}) 方法直接獲取blob對象（類似文件對象），詳解見： https://segmentfault.com/a/1190000011563430?utm_source=tag-newest