最近公司要做一個(gè)h5哟玷，其中包含了圖片裁剪狮辽、上傳等功能一也，當(dāng)時(shí)也沒太在意就用了cropper插件，因?yàn)橹霸赑C端用過也熟悉喉脖，大概看了一下文檔椰苟，說是支持移動(dòng)端，就毫不猶豫的選擇了它树叽，從此踏上了填坑之路......
第一個(gè)問題：ios豎屏拍照裁剪圖片后上傳到服務(wù)器的圖片是順時(shí)針旋轉(zhuǎn)90度
原因：由于目前的手機(jī)拍照基本都在2M以上舆蝴，而ios中只要超過2M圖片就會(huì)自動(dòng)旋轉(zhuǎn)。拍照后直接取出來的UIimage（用UIImagePickerControllerOriginalImage取出）题诵，它本身的imageOrientation屬性是3洁仗，即UIImageOrientationRight。如果這個(gè)圖片直接使用則沒事性锭，但是如果對(duì)它進(jìn)行裁剪赠潦、縮放等操作后，它的這個(gè)imageOrientation屬性會(huì)變成0草冈。此時(shí)這張圖片用在別的地方就會(huì)發(fā)生旋轉(zhuǎn)她奥。imageOrientation是只讀的，不能直接修改其值怎棱。
解決方法（js）: 當(dāng)拍照后哩俭，獲取input中的圖片數(shù)據(jù)，利用exif.js（http://code.ciaoca.com/JavaScript/exif-js/）獲取到Orientation屬性拳恋，此屬性有四個(gè)值
1 表示旋轉(zhuǎn)0度坑填，也就是沒有旋轉(zhuǎn)。
6 表示順時(shí)針旋轉(zhuǎn)90度
8 表示逆時(shí)針旋轉(zhuǎn)90度
3 旋轉(zhuǎn)180度
我們要做的就是在拍照后刊侯，從input中獲取到圖片宾娜，然后得到它的Orientation值，在裁剪后給它逆著旋轉(zhuǎn)90度吩谦，然后上傳就好了鸳谜，代碼在這就不寫了。
第二個(gè)問題：ios豎屏拍照后裁剪圖片后所得的圖片與裁剪區(qū)域不相符式廷。
暫時(shí)沒找到原因咐扭，由于之前直接在百度上搜索cropper，然后下載滑废，也沒有看是哪個(gè)版本蝗肪，在百度中搜索也完全搜不到相關(guān)的問題，最后我在github上cropper項(xiàng)目中issue中找到答案蠕趁，應(yīng)該是cropper之前的bug薛闪，新版本已經(jīng)修復(fù)，我就試著用了新版本俺陋，完美解決豁延，而且新版本中已經(jīng)解決了第一個(gè)問題昙篙。
總結(jié)：
這一路下來完全是自己坑了自己，如果一開始直接在GitHub上下載最新版就不會(huì)出現(xiàn)這些問題诱咏，以后吸取教訓(xùn)苔可。
最后貼上圖片裁剪、上傳完整代碼：
<!--html-->
<!--文件上傳-->
<input type="file" class="js-uploadfile">
<!--確定裁剪-->
<input type="button" class="js-ok" value="裁剪">
<!--cropper基本結(jié)構(gòu)-->
<div class="container js-container" style="width: 100%;height: auto">
<img class="js-image" src="" style="width: 100%;height: auto">
</div>
<!--裁剪結(jié)果顯示-->
<div style="width: 60%;height: auto;margin: 1rem 20%">
<img id="showImg" src="" alt="" style="width: 100%;height: auto">
</div>
//js代碼
var url = './index.php';
$(".js-uploadfile").on("change", function () {
var fr = new FileReader();
var file = this.files[0];
fr.readAsDataURL(file);
fr.onload = function () {
//這里初始化cropper
$('.js-image').attr('src', fr.result);
iniCropper()
};
});
var croppable = false;
function iniCropper() {
var $image = $('.js-image'),
image = $image[0];
$image.cropper({
dragMode: 'move',
aspectRatio: 1,
autoCropArea: 0.65,
restore: false,
viewMode: 1,
guides: false,
center: false,
highlight: false,
cropBoxMovable: false,
cropBoxResizable: false,
toggleDragModeOnDblclick: false,
rotatable: true,
checkOrientation: true,
ready: function () {
croppable = true;
}
});
}
$('.js-ok').on('click', function () {
var dataURL = $('.js-image').cropper("getCroppedCanvas", {
width: 200,
height: 200
});
var data = {
imgData: dataURL.toDataURL('image/png')
};
submit(url, data);
});
function submit(url, data) {
$.ajax({
type: 'POST',
url: url,
data: data,
success: function (res) {
$('#showImg').attr('src', res.img_name);
},
dataType: 'JSON'
})
}
//php代碼
<?php
/**
* Created by PhpStorm.
* User: Administrator
* Date: 2017/7/27
* Time: 18:57
*/
$post_data = $_POST['imgData'];
if ($_POST) {
if ($_POST['imgData']) {
$base_img = $_POST['imgData'];
$base_img = str_replace('data:image/png;base64,', '', $base_img);
$path = './avatar/';
$pre = 'img_';
$output_file = $pre . time() . rand(100, 999) . '.png';
$path = $path . $output_file;
$success = file_put_contents($path, base64_decode($base_img));
if ($success) {
$ajax_return = array(
'code' => 1,
'msg' => '上傳成功',
'img_name' => $path
);
exit(json_encode($ajax_return, JSON_UNESCAPED_UNICODE));
}
$ajax_return = array(
'code' => 0,
'msg' => '上傳失敗',
);
exit(json_encode($ajax_return, JSON_UNESCAPED_UNICODE));
} else {
$ajax_return = array(
'code' => 0,
'msg' => '圖片為空',
);
exit(json_encode($ajax_return, JSON_UNESCAPED_UNICODE));
}
} else {
exit('發(fā)生錯(cuò)誤');
}
