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