移动端图片裁剪上传—jQuery.cropper.js

时间:2024-03-11 20:03:15

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