<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Crop Box</title>
<link rel="stylesheet" href="css/cropbox.css" type="text/css" />
<style>
.container {
position: absolute;
top: 10%;
left: 10%;
right: 0;
bottom: 0;
background-color: #FFFFFF;
}
.action {
width: 400px;
height: 30px;
margin: 10px 0;
}
.cropped>img {
margin-right: 10px;
}
#coor {
width: 10px;
height: 10px;
overflow: hidden;
cursor: se-resize;
position: absolute;
right: 0;
bottom: 0;
background-color: #09C;
}
</style>
</head>
<body>
<script src="js/jquery-1.10.2.js"></script>
<script src="js/cropbox.js"></script>
<div id="rong" class="container">
<div class="imageBox">
<div class="thumbBox">
<div id="coor"></div>
</div>
</div>
<div class="action">
<input type="file" id="file" style="float:left; width: 250px">
<input type="button" id="btnCrop" value="Crop" style="float: right">
<input type="button" id="btnZoomIn" class="Btnsty_peyton" value="+">
<input type="button" id="btnZoomOut" class="Btnsty_peyton" value="-">
</div>
<div class="cropped">
</div>
</div>
<div>
</div>
<script type="text/javascript">
var _URL = window.URL || window.webkitURL;
$(window).load(function () {
var options =
{
thumbBox: '.thumbBox',
imgSrc: 'img/t.png'
}
var cropper = $('.imageBox').cropbox(options);
$('#file').on('change', function () {
var reader = new FileReader();
reader.onload = function (e) {
options.imgSrc = e.target.result;
cropper = $('.imageBox').cropbox(options);
}
reader.readAsDataURL(this.files[0]);
this.files = [];
})
$('#btnCrop').on('click', function () {
var img = cropper.getDataURL();
var file = Base64ToFile(img);
//console.log(file);
// console.log(_URL.createObjectURL(file))
$('.cropped').append('<img src="' + img + '">');
})
$('#btnZoomIn').on('click', function () {
cropper.zoomIn();
})
$('#btnZoomOut').on('click', function () {
cropper.zoomOut();
})
});
function Base64ToFile(urlData) {
var bytes = window.atob(urlData.split(',')[1]); //去掉url的头，并转换为byte
//处理异常,将ascii码小于0的转换为大于0
var ab = new ArrayBuffer(bytes.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
return new Blob([ab], { type: 'image/png' });
}
</script>
</body>
</html>
