cropper.js移動端使用
一、總結
一句話總結:
啓示:找對關鍵詞,找對相關方面的應用,效果真的非常好
比如 cropper.js移動端使用,這樣設置了(dragMode: 'move',//拖拽模式) 之後,手機端的效果就變的好起來了
1、cropper.js移動端設置?
dragMode: 'move',//拖拽模式
2、移動端打開相冊?
accept屬性,值爲image/*
<input type="file" accept="image/*">
二、移動端圖片裁剪上傳—jQuery.cropper.js
轉自或參考:移動端圖片裁剪上傳—jQuery.cropper.js
https://www.cnblogs.com/kiko-2/p/10273568.html
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