contra-ngx-img-cropper
Version:
contra image cropper utility
225 lines • 10.4 kB
JavaScript
import { Component, Input, Renderer, ViewChild, Output, EventEmitter } from '@angular/core';
import { ImageCropper } from './imageCropper';
import { CropperSettings } from './cropperSettings';
import { Exif } from './exif';
import { CropPosition } from './model/cropPosition';
var ImageCropperComponent = (function () {
function ImageCropperComponent(renderer) {
this.cropPositionChange = new EventEmitter();
this.onCrop = new EventEmitter();
this.renderer = renderer;
}
ImageCropperComponent.prototype.ngAfterViewInit = function () {
var canvas = this.cropcanvas.nativeElement;
if (!this.settings) {
this.settings = new CropperSettings();
}
this.renderer.setElementAttribute(canvas, 'class', this.settings.cropperClass);
if (!this.settings.dynamicSizing) {
this.renderer.setElementAttribute(canvas, 'width', this.settings.canvasWidth.toString());
this.renderer.setElementAttribute(canvas, 'height', this.settings.canvasHeight.toString());
}
else {
this.windowListener = this.resize.bind(this);
window.addEventListener('resize', this.windowListener);
}
if (!this.cropper) {
this.cropper = new ImageCropper(this.settings);
}
this.cropper.prepare(canvas);
};
ImageCropperComponent.prototype.ngOnChanges = function (changes) {
if (this.isCropPositionChanged(changes)) {
this.cropper.updateCropPosition(this.cropPosition.toBounds());
if (this.cropper.isImageSet()) {
var bounds = this.cropper.getCropBounds();
this.image.image = this.cropper.getCroppedImageHelper().src;
this.onCrop.emit(bounds);
}
this.updateCropBounds();
}
if (changes.inputImage) {
this.setImage(changes.inputImage.currentValue);
}
};
ImageCropperComponent.prototype.ngOnDestroy = function () {
if (this.settings.dynamicSizing && this.windowListener) {
window.removeEventListener('resize', this.windowListener);
}
};
ImageCropperComponent.prototype.onTouchMove = function (event) {
this.cropper.onTouchMove(event);
};
ImageCropperComponent.prototype.onTouchStart = function (event) {
this.cropper.onTouchStart(event);
};
ImageCropperComponent.prototype.onTouchEnd = function (event) {
this.cropper.onTouchEnd(event);
if (this.cropper.isImageSet()) {
this.image.image = this.cropper.getCroppedImageHelper().src;
this.onCrop.emit(this.cropper.getCropBounds());
this.updateCropBounds();
}
};
ImageCropperComponent.prototype.onMouseDown = function (event) {
this.cropper.onMouseDown(event);
};
ImageCropperComponent.prototype.onMouseUp = function (event) {
if (this.cropper.isImageSet()) {
this.cropper.onMouseUp(event);
this.image.image = this.cropper.getCroppedImageHelper().src;
this.onCrop.emit(this.cropper.getCropBounds());
this.updateCropBounds();
}
};
ImageCropperComponent.prototype.onMouseMove = function (event) {
this.cropper.onMouseMove(event);
};
ImageCropperComponent.prototype.fileChangeListener = function ($event) {
if ($event.target.files.length === 0)
return;
var file = $event.target.files[0];
if (this.settings.allowedFilesRegex.test(file.name)) {
var image_1 = new Image();
var fileReader = new FileReader();
var that_1 = this;
fileReader.addEventListener('loadend', function (loadEvent) {
image_1.addEventListener('load', function () {
that_1.setImage(image_1);
});
image_1.src = loadEvent.target.result;
});
fileReader.readAsDataURL(file);
}
};
ImageCropperComponent.prototype.resize = function () {
var canvas = this.cropcanvas.nativeElement;
this.settings.canvasWidth = canvas.offsetWidth;
this.settings.canvasHeight = canvas.offsetHeight;
this.cropper.resizeCanvas(canvas.offsetWidth, canvas.offsetHeight, true);
};
ImageCropperComponent.prototype.reset = function () {
this.cropper.reset();
this.renderer.setElementAttribute(this.cropcanvas.nativeElement, 'class', this.settings.cropperClass);
this.image.image = this.cropper.getCroppedImageHelper().src;
};
ImageCropperComponent.prototype.setImage = function (image, newBounds) {
var _this = this;
if (newBounds === void 0) { newBounds = null; }
var self = this;
this.renderer.setElementAttribute(this.cropcanvas.nativeElement, 'class', this.settings.cropperClass + " " + this.settings.croppingClass);
this.raf = window.requestAnimationFrame(function () {
if (self.raf) {
window.cancelAnimationFrame(self.raf);
}
if (image.naturalHeight > 0 && image.naturalWidth > 0) {
image.height = image.naturalHeight;
image.width = image.naturalWidth;
window.cancelAnimationFrame(self.raf);
self.getOrientedImage(image, function (img) {
if (_this.settings.dynamicSizing) {
var canvas = _this.cropcanvas.nativeElement;
_this.settings.canvasWidth = canvas.offsetWidth;
_this.settings.canvasHeight = canvas.offsetHeight;
_this.cropper.resizeCanvas(canvas.offsetWidth, canvas.offsetHeight, false);
}
self.cropper.setImage(img);
if (self.cropPosition && self.cropPosition.isInitialized()) {
self.cropper.updateCropPosition(self.cropPosition.toBounds());
}
self.image.original = img;
var bounds = self.cropper.getCropBounds();
self.image.image = self.cropper.getCroppedImageHelper().src;
if (newBounds != null) {
bounds = newBounds;
self.cropper.setBounds(bounds);
_this.cropper.updateCropPosition(bounds);
}
self.onCrop.emit(bounds);
});
}
});
};
ImageCropperComponent.prototype.isCropPositionChanged = function (changes) {
if (this.cropper && changes['cropPosition'] && this.isCropPositionUpdateNeeded) {
return true;
}
else {
this.isCropPositionUpdateNeeded = true;
return false;
}
};
ImageCropperComponent.prototype.updateCropBounds = function () {
var cropBound = this.cropper.getCropBounds();
this.cropPositionChange.emit(new CropPosition(cropBound.left, cropBound.top, cropBound.width, cropBound.height));
this.isCropPositionUpdateNeeded = false;
};
ImageCropperComponent.prototype.getOrientedImage = function (image, callback) {
var img;
Exif.getData(image, function () {
var orientation = Exif.getTag(image, 'Orientation');
if ([3, 6, 8].indexOf(orientation) > -1) {
var canvas = document.createElement('canvas'), ctx = canvas.getContext('2d'), cw = image.width, ch = image.height, cx = 0, cy = 0, deg = 0;
switch (orientation) {
case 3:
cx = -image.width;
cy = -image.height;
deg = 180;
break;
case 6:
cw = image.height;
ch = image.width;
cy = -image.height;
deg = 90;
break;
case 8:
cw = image.height;
ch = image.width;
cx = -image.width;
deg = 270;
break;
default:
break;
}
canvas.width = cw;
canvas.height = ch;
ctx.rotate(deg * Math.PI / 180);
ctx.drawImage(image, cx, cy);
img = document.createElement('img');
img.width = cw;
img.height = ch;
img.addEventListener('load', function () {
callback(img);
});
img.src = canvas.toDataURL('image/png');
}
else {
img = image;
callback(img);
}
});
};
ImageCropperComponent.decorators = [
{ type: Component, args: [{
selector: 'img-cropper',
template: "\n <span class=\"ng2-imgcrop\">\n <input *ngIf=\"!settings.noFileInput\" type=\"file\" accept=\"image/*\" (change)=\"fileChangeListener($event)\">\n <canvas #cropcanvas\n (mousedown)=\"onMouseDown($event)\"\n (mouseup)=\"onMouseUp($event)\"\n (mousemove)=\"onMouseMove($event)\"\n (mouseleave)=\"onMouseUp($event)\"\n (touchmove)=\"onTouchMove($event)\"\n (touchend)=\"onTouchEnd($event)\"\n (touchstart)=\"onTouchStart($event)\">\n </canvas>\n </span>\n "
},] },
];
/** @nocollapse */
ImageCropperComponent.ctorParameters = function () { return [
{ type: Renderer, },
]; };
ImageCropperComponent.propDecorators = {
'cropcanvas': [{ type: ViewChild, args: ['cropcanvas', undefined,] },],
'settings': [{ type: Input, args: ['settings',] },],
'image': [{ type: Input, args: ['image',] },],
'inputImage': [{ type: Input, args: ['inputImage',] },],
'cropper': [{ type: Input },],
'cropPosition': [{ type: Input },],
'cropPositionChange': [{ type: Output },],
'onCrop': [{ type: Output },],
};
return ImageCropperComponent;
}());
export { ImageCropperComponent };
//# sourceMappingURL=imageCropperComponent.js.map