<html><head lang="en">
<meta charset="UTF-8">
<title>Crop Box</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<style> .container {position: absolute;
top: 10%; left: 10%; right: 0; bottom: 0;
}
.action {width: 400px;
height: 30px;
margin: 10px 0;
}
.cropped>img
{margin-right: 10px;
}
</style></head><body><script src="http://yui.yahooapis.com/3.17.2/build/yui/yui-min.js"></script>
<script src="../CropBox.js"></script>
<div class="container">
<div class="imageBox">
<div class="thumbBox"></div>
<div class="spinner" style="display: none">Loading...</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" value="+" style="float: right">
<input type="button" id="btnZoomOut" value="-" style="float: right">
</div><div class="cropped">
</div></div><script type="text/javascript">
YUI().use('node', 'crop-box', function(Y){
var options =
{imageBox: '.imageBox',
thumbBox: '.thumbBox',
spinner: '.spinner',
imgSrc: ''
}
var cropper;
Y.one('#file').on('change', function(){
var reader = new FileReader();
reader.onload = function(e) {
options.imgSrc = e.target.result;
cropper = new Y.CropBox(options);
}
reader.readAsDataURL(this.get('files')._nodes[0]);
this.get('files')._nodes = [];
})
Y.one('#btnCrop').on('click', function(){
var img = cropper.getAvatar()
Y.one('.cropped').append('<img src="'+img+'">');
})
Y.one('#btnZoomIn').on('click', function(){
cropper.zoomIn();
})
Y.one('#btnZoomOut').on('click', function(){
cropper.zoomOut();
})
})
</script></body></html>.imageBox
.imageBox{position: relative;
height: 400px;
width: 400px;
border:1px solid #aaa;
background: #fff;
overflow: hidden;
background-repeat: no-repeat;
cursor:move;
}
.imageBox .thumbBox
{position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
margin-top: -100px;
margin-left: -100px;
box-sizing: border-box;
border: 1px solid rgb(102, 102, 102);
box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.5);
background: none repeat scroll 0% 0% transparent;
}
.imageBox .spinner
{position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: center;
line-height: 300px;
background: rgba(0,0,0,0.7);
}
/**
/** * Created by ezgoing on 14/9/2014. */YUI.add('crop-box', function (Y) {
Y.CropBox = Y.Base.create('crop-box', Y.Base, [],
{initializer: function (options)
{this.options = options;
this.state = {};
this.render();
},
render: function ()
{var self = this;
this.imageBox = Y.one(this.options.imageBox);
this.thumbBox = this.imageBox.one(this.options.thumbBox);
this.spinner = this.imageBox.one(this.options.spinner);
this.initObject();
return this;
},
initObject: function()
{var self = this;
this.spinner.show();
this.image = new Image();
this.image.onload = function() {
self.spinner.hide();
self.setBackground();
//event handlerself.imageBox.on('mousedown', self.imgMouseDown, self);
self.imageBox.on('mousemove', self.imgMouseMove, self);
self.mouseup = Y.one('body').on('mouseup', self.imgMouseUp, self);
Y.UA.gecko > 0?
self.imageBox.on('DOMMouseScroll', self.zoomImage, self):
self.imageBox.on('mousewheel', self.zoomImage, self);
};
this.image.src = this.options.imgSrc;
},
setBackground: function()
{if(!this.ratio) this.ratio = 1;
var w = parseInt(this.image.width)*this.ratio;
var h = parseInt(this.image.height)*this.ratio;
var pw = (this.imageBox.get('clientWidth') - w) / 2;
var ph = (this.imageBox.get('clientHeight') - h) / 2;
this.imageBox.setAttribute('style',
'background-image: url(' + this.image.src + '); ' +
'background-size: ' + w +'px ' + h + 'px; ' +
'background-position: ' + pw + 'px ' + ph + 'px; ' +
'background-repeat: no-repeat');},
imgMouseDown: function(e)
{e.stopImmediatePropagation();
this.state.dragable = true;
this.state.mouseX = e.clientX;
this.state.mouseY = e.clientY;
},
imgMouseMove: function(e)
{e.stopImmediatePropagation();
if (this.state.dragable)
{var x = e.clientX - this.state.mouseX;
var y = e.clientY - this.state.mouseY;
var bg = this.imageBox.getStyle('backgroundPosition').split(' ');
var bgX = x + parseInt(bg[0]);
var bgY = y + parseInt(bg[1]);
this.imageBox.setStyle('backgroundPosition', bgX +'px ' + bgY + 'px');
this.state.mouseX = e.clientX;
this.state.mouseY = e.clientY;
}
},
imgMouseUp: function(e)
{e.stopImmediatePropagation();
this.state.dragable = false;
},
zoomImage: function(e)
{e.wheelDelta > 0? this.ratio*=1.1 : this.ratio*=0.9;
this.setBackground();
},
getAvatar: function ()
{var self = this,
width = this.thumbBox.get('clientWidth'),
height = this.thumbBox.get('clientHeight'),
canvas = document.createElement("canvas"),
dim = this.imageBox.getStyle('backgroundPosition').split(' '),
size = this.imageBox.getStyle('backgroundSize').split(' '),
dx = parseInt(dim[0]) - this.imageBox.get('clientWidth')/2 + width/2,
dy = parseInt(dim[1]) - this.imageBox.get('clientHeight')/2 + height/2,
dw = parseInt(size[0]);
dh = parseInt(size[1]);
sh = parseInt(this.image.height);
sw = parseInt(this.image.width);
canvas.width = width;
canvas.height = height;
var context = canvas.getContext("2d");
context.drawImage(this.image, 0, 0, sw, sh, dx, dy, dw, dh);
var imageData = canvas.toDataURL('image/jpeg');
return imageData;
},
zoomIn: function ()
{this.ratio*=1.1;
this.setBackground();
},
zoomOut: function ()
{this.ratio*=0.9;
this.setBackground();
},
destructor: function ()
{if (this.mouseup) this.mouseup.detach()
}
});
}, '1.0',{requires: [ 'node', 'base' ]
});