cropper.js移动端使用

一、总结

一句话总结：

启示：找对关键词，找对相关方面的应用，效果真的非常好

比如 cropper.js移动端使用，这样设置了(dragMode: 'move',//拖拽模式) 之后，手机端的效果就变的好起来了

1、cropper.js移动端设置？

dragMode: 'move',//拖拽模式

2、移动端打开相册？

accept属性，值为image/*

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

转自或参考：移动端图片裁剪上传—jQuery.cropper.js

https://www.cnblogs.com/kiko-2/p/10273568.html

jQuery.cropper.js是一款使用简单且功能强大的图片剪裁jQuery插件。该图片剪裁插件支持图片放大缩小，支持图片旋转，支持触摸屏设备，支持canvas，并且支持跨浏览器使用。

一、移动端获取本地相册兼容

安卓：

ios：

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

二、判断图片格式

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

三、获取图片文件的url

//Blob URL格式

functionget_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) ;

}returnurl ;

}//Data URL格式(base64编码)

functionget_File_Url(file) {var reader = newFileReader();

reader.readAsDataURL(file);

reader.οnlοad= function(e) {

...

previewImg.attr("src",e.target.result);}}

四、图片预览

图片预览容器：

$('.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 = newFormData();

fd.append('uploadfile', file);

$.ajax({

url:'',

type:'post',

data: fd,

cache:false,

processData:false,

contentType:false}).then(function(res){

...

});

2、通过form上传图片：

...

注意：裁剪完图片后(图片上传成功、或者取消)需要销毁已经生成的cropper实例，否则一直存在于裁剪框内影响下一张图片的裁剪：$("#previewImg").cropper('destroy');

七、图片转化为文件

最后一个重点就是如何将已经裁剪好的图片转化为一个文件呢？上面已经通过插件得到了canvas绘制的剪裁图像，需要进行一系列转化形成我们最终需要的文件。

1、通过 canvas.toDataURL() 方法获取图像的数据链接(base64格式)，然后将 base64编码转成file文件；

functionbase64_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 = newUint8Array(len);for(var i = 0; i < len; i++){

u8arr[i]=data.charCodeAt(i);

}return newFile([u8arr], filename, {type: contentType});

}

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

2、base64——>blob ——> file

functionbase64_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 = newUint8Array(len);for(var i = 0; i < len; i++){

u8arr[i]=data.charCodeAt(i);

}var blob = newBlob([u8arr], {type: contentType});return newFile([blob], filename , {type: contentType});

}

3、通过 canvas.toBlob(function(blob){console.log(blob);}) 方法直接获取blob对象(类似文件对象)，详解见： https://segmentfault.com/a/1190000011563430?utm_source=tag-newest