<!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>
<?php
header('Content-type:text/html;charset=utf-8');
$base64_image_content = $_POST['imgBase64'];
//匹配出图片的格式
if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_image_content, $result)){
$type = $result[2];
$new_file = "upload/active/img/".date('Ymd',time())."/";
if(!file_exists($new_file))
{
//检查是否有该文件夹，如果没有就创建，并给予最高权限
mkdir($new_file, 0700);
}
$new_file = $new_file.time().".{$type}";
if (file_put_contents($new_file, base64_decode(str_replace($result[1], '', $base64_image_content)))){
echo '新文件保存成功：', $new_file;
}else{
echo '新文件保存失败';
}
}
?>
