/**
* PaperCropper * * @param container * Main container of objects * @param options * Extra options * * Example, important all classes used for crop starts with "crop-image*" * The buttons, classes 'crop-image-btn-*' are optional *
<!– Main container (you need to supply this in constructor) –> <div class=“crop-image-container”>
<!-- Hidden input for save the crop values --> <input class="crop-image-value-x" type="hidden" name="cover_crop_x" value=""> <input class="crop-image-value-y" type="hidden" name="cover_crop_y" value=""> <input class="crop-image-value-width" type="hidden" name="cover_crop_width" value=""> <input class="crop-image-value-height" type="hidden" name="cover_crop_height" value=""> <input class="crop-image-value-ratio" type="hidden" name="cover_crop_ratio" value=""> <!-- File input for change the image --> <input class="crop-image-file-input" type="file"> <hr> <!-- Wrap the image or canvas element with a block element (container) --> <div class="crop-image-wrapper"> <img class="crop-image" src=""> </div> <hr> <button class="crop-image-btn-zoom-in" type="button">Zoom in</button> <button class="crop-image-btn-zoom-out" type="button">Zoom out</button> <button class="crop-image-btn-move-left" type="button">Move left</button> <button class="crop-image-btn-move-right" type="button">Move right</button> <button class="crop-image-btn-move-up" type="button">Move up</button> <button class="crop-image-btn-move-down" type="button">Move down</button>
</div>
*/
function PaperCropper(container, opt) {
var that = this; this.container = $(container); this.image = $(container).find('.crop-image'); this.inputX = $(container).find('.crop-image-value-x'); this.inputY = $(container).find('.crop-image-value-y'); this.inputWidth = $(container).find('.crop-image-value-width'); this.inputHeight = $(container).find('.crop-image-value-height'); this.inputRatio = $(container).find('.crop-image-value-ratio'); var aspect = $(container).attr('data-crop-image-range'); if( isNaN(aspect) ) { this.aspect = null; } else { this.aspect = parseFloat(aspect); } if ( isNaN(this.inputRatio.val()) ) { this.inputRatio.val(1); } this.init();
}
/** Check if browswer support it */ PaperCropper.isSupported = function() {
return (typeof FileReader !== "undefined");
}
/** Initializes all */ PaperCropper.prototype.init = function() {
var fileInput = this.container.find('input.crop-image-file-input'); var that = this; // file input change fileInput.change(function(event){ that.fileInputChange(event); }); // cropper this.cropper = new Cropper(this.image[0], { aspectRatio: this.aspect, crop: function(event){ that.cropperCrop(event); }, zoom: function (event) { that.cropperZomm(event); }, built: function() { console.log('cropper build') that.cropperBuild(); } }); // buttons this.container.find('.crop-image-btn-zoom-in').click(function(){ that.cropper.zoom(0.1); }); this.container.find('.crop-image-btn-zoom-out').click(function(){ that.cropper.zoom(-0.1); }); this.container.find('.crop-image-btn-move-left').click(function(){ that.cropper.move(-10,0); }); this.container.find('.crop-image-btn-move-right').click(function(){ that.cropper.move(10,0); }); this.container.find('.crop-image-btn-move-up').click(function(){ that.cropper.move(0,-10); }); this.container.find('.crop-image-btn-move-down').click(function(){ that.cropper.move(0,10); });
}
/** Callback method used when cropper are full loaded */ PaperCropper.prototype.cropperBuild = function() {
// set initial values this.setCropperData(this.inputX.val(), this.inputY.val(), this.inputWidth.val(), this.inputHeight.val(), this.inputRatio.val());
}
/** Callback method used when the user changes the crop */ PaperCropper.prototype.cropperCrop = function (event) {
console.log('crop:',event.detail) console.log('crop crop data:',this.cropper.getData()) this.inputX.val(parseInt(event.detail.x)); this.inputY.val(parseInt(event.detail.y)); this.inputWidth.val(parseInt(event.detail.width)); this.inputHeight.val(parseInt(event.detail.height));
}
PaperCropper.prototype.cropperZomm = function (event) {
console.log('zoom:', event.detail) console.log('zoom crop data:',this.cropper.getData()) this.inputRatio.val(parseFloat(event.detail.ratio));
}
/** Callback method used when the user changes the file */ PaperCropper.prototype.fileInputChange = function (event) {
var input = event.target; var that = this; if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { that.cropper.replace(e.target.result); } reader.readAsDataURL(input.files[0]); }
}
/** Set the cropper data */ PaperCropper.prototype.setCropperData = function (x, y, width, height, ratio) {
this.cropper.zoomTo(parseFloat(ratio)); this.cropper.setData({ 'x': parseInt(x), 'y': parseInt(y), 'width': parseInt(width), 'height': parseInt(height), 'rotate': 0, 'scaleX': 1, 'scaleY': 1, });
}