Image Cropper
<button id="cropLink" class="btn btn-primary">Crop Image to x: 45, y: 5, width: 390, height: 125</button>
<div class="layout image-cropper">
<div class="column w50">
<div class="column-content">
<img id="image" src="https://alloyui.com/image-cropper/img/crop-image.jpg" />
</div>
</div>
<div id="cropped-view" class="column w50">
<div class="column-content cropped-output">
<div class="cropped-image helper-hidden" id="croppedImage"></div>
<div class="status helper-hidden" id="status"></div>
</div>
</div>
</div>
YUI().use(
'aui-image-cropper',
function(Y) {
var imageCropper = new Y.ImageCropper(
{
srcNode: '#image',
x: 100,
y: 100
}
).render();
var statusTPL = '<strong class="x">x: {x}</strong><strong class="y">y: {y}</strong><strong class="height">height: {height}</strong><strong class="width">width: {width}</strong>';
var updateImage = function() {
var cropRegion = imageCropper.get('region');
croppedImage.setStyles(
{
'backgroundPosition': (-cropRegion.x) + 'px ' + (-cropRegion.y) + 'px',
height: cropRegion.height,
width: cropRegion.width
}
);
croppedImage.html(Y.Lang.sub(statusTPL, cropRegion));
};
imageCropper.after(
'crop',
function(event) {
updateImage();
}
);
var croppedImage = Y.one('#croppedImage');
var croppedStatus = Y.one('#croppedStatus');
croppedImage.show();
updateImage();
Y.one('#cropLink').on(
'click',
function (event) {
imageCropper.setAttrs(
{
cropHeight: 125,
cropWidth: 390,
x: 45,
y: 5
}
);
}
);
}
);