H5 頭像上傳（支援裁切）
阿新 • • 發佈：2019-01-06
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=yes">
<link rel="stylesheet" type="text/css" href="css/cropper.min.css">
<link rel="stylesheet" type="text/css" href="css/mui.min.css">
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/lrz.mobile.min.js"></script>
<script type="text/javascript" src="dist/lrz.all.bundle.js"></script>
<script type="text/javascript" src="js/cropper.min.js"></script>
<script type="text/javascript">
$(function() {
function toFixed2(num) {
return parseFloat(+num.toFixed(2));
}
$('#cancleBtn').on('click', function() {
$("#showEdit").fadeOut();
$('#showResult').fadeIn();
});
$('#confirmBtn').on('click', function() {
$("#showEdit").fadeOut();
var $image = $('#report > img');
var dataURL = $image.cropper("getCroppedCanvas");
var imgurl = dataURL.toDataURL("image/jpeg", 0.5);
$("#changeAvatar > img").attr("src", imgurl);
$("#basetxt").val(imgurl);
$('#showResult').fadeIn();
});
function cutImg() {
$('#showResult').fadeOut();
$("#showEdit").fadeIn();
var $image = $('#report > img');
$image.cropper({
aspectRatio: 1 / 1,
autoCropArea: 0.7,
strict: true,
guides: false,
center: true,
highlight: false,
dragCrop: false,
cropBoxMovable: false,
cropBoxResizable: false,
zoom: -0.2,
checkImageOrigin: true,
background: false,
minContainerHeight: 400,
minContainerWidth: 300
});
}
function doFinish(startTimestamp, sSize, rst) {
var finishTimestamp = (new Date()).valueOf();
var elapsedTime = (finishTimestamp - startTimestamp);
//$('#elapsedTime').text('壓縮耗時： ' + elapsedTime + 'ms');
var sourceSize = toFixed2(sSize / 1024),
resultSize = toFixed2(rst.base64Len / 1024),
scale = parseInt(100 - (resultSize / sourceSize * 100));
$("#report").html('<img src="' + rst.base64 + '" style="width: 100%;height:100%">');
cutImg();
}
$('#image').on('change', function() {
var startTimestamp = (new Date()).valueOf();
var that = this;
lrz(this.files[0], {
width: 800,
height: 800,
quality: 0.7
})
.then(function(rst) {
//console.log(rst);
doFinish(startTimestamp, that.files[0].size, rst);
return rst;
})
.then(function(rst) {
// 這裡該上傳給後端啦
// 虛擬碼：ajax(rst.base64)..
return rst;
})
.then(function(rst) {
// 如果您需要，一直then下去都行
// 因為是Promise物件，可以很方便組織程式碼 \(^o^)/~
})
.catch(function(err) {
// 萬一出錯了，這裡可以捕捉到錯誤資訊
// 而且以上的then都不會執行
alert(err);
})
.always(function() {
// 不管是成功失敗，這裡都會執行
});
});
});
</script>
</head>
<body>
<div id="showResult">
<div style="width: 50%;margin: 0 auto;margin-top: 10px;">
<input id="image" type="file" accept="image/*" capture="camera" />
</div>
<div id="changeAvatar" style="margin-top: 35px;">
<img src="image/default.jpg" style="width: 100px;margin-top: 10px;margin: 0 auto;display:block;">
</div>
</div>
<div id="showEdit" style="display: none;width:100%;height: 100%;position: absolute;top:0;left: 0;z-index: 9;">
<div style="width:100%;position: absolute;top:10px;left:0px;">
<button class="mui-btn" data-mui-style="fab" id='cancleBtn' style="margin-left: 10px;">取消</button>
<button class="mui-btn" data-mui-style="fab" data-mui-color="primary" id='confirmBtn' style="float:right;margin-right: 10px;">確定</button>
</div>
<div id="report">
<img src="image/default.jpg" style="width: 300px;height:300px">
</div>
</div>
<div style="width:98%; margin:50px auto;">
<textarea name="txt" rows="10" id="basetxt" style="width:100%; border-radius:5px" onclick="this.checked = true" placeholder="base64碼" ></textarea>
</div>
</body>
</html>