<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title> halfh</title>
<link rel="stylesheet" href="css/cropper.css">
<style>
.foot
{
position:fixed;
bottom:40px;
z-index:10000;
color:yellow;
}
</style>
</head>
<body>
<img src=" " alt="" style="display:none" id="showImg">
<div style="padding: 0;margin: 0;position:fixed;top: 0;left: 0;z-index: 200;display:none" id="containerDiv">
<img src="" alt="Picture" >
</div>
<div class="foot"> <span id="select">选择</span> <span id="ok">确认</span></div>
<input id="inputImage" type="file" accept="image/*" style="display:none" />
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/exif.js"></script>
<script src="js/cropper.js">
</script>
<script>
window.onload =function(){
$("#select").click(function(){
$("#inputImage").click();
})
'use strict';
var screenWidth = $(window).width();
var screenHeight = $(window).height();
var image = $("img")[0];
var options = {
minContainerHeight : screenHeight ,
minContainerWidth : screenWidth,
aspectRatio: 1 / 1,//裁剪框比例 1：1
viewMode : 1,//显示
guides :false,//裁剪框虚线 默认true有
autoCropArea:0.4,
dragMode : "move",
build: function (e) { //加载开始
//可以放你的过渡 效果
},
built: function (e) { //加载完成
$("#containerDiv").show();
$("#imgEdit").show();
},
zoom: function (e) {
console.log(e.type, e.detail.ratio);
},
background : true,// 容器是否显示网格背景
movable : true,//是否能移动图片
cropBoxMovable :true,//是否允许拖动裁剪框
cropBoxResizable :true,//是否允许拖动 改变裁剪框大小
};
var cropper;
$("input").bind("change",function(){
var file = this.files[0];
var URL = URL || webkitURL;
var boldURL = URL.createObjectURL(file);
cropper= new Cropper(image, options);
cropper.reset().replace(boldURL);
})
$("#ok").click(function(){
var data = cropper.getCroppedCanvas().toDataURL('image/jpg');
console.log(data);
$(".cropper-container").hide();
$("#showImg").show();
$("#showImg").attr("src",data).removeClass("cropper-hidden");
});
}
</script>
</body>
</html>