标签：capture orm 预览图 function attr 生成 裁剪 ++ code
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
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 ; }
四、图片预览
图片预览容器：<img src="" 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 //不要去设置Content-Type请求头
}).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
标签：capture orm 预览图 function attr 生成 裁剪 ++ code
原文地址：https://www.cnblogs.com/kiko-2/p/10273568.html
