@bsj/angular-image-picker
Version:
Angular image picker
227 lines • 11.9 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var core_1 = require("@angular/core");
var forms_1 = require("@angular/forms");
var helpers_1 = require("./../helpers");
var filters_1 = require("./../filters");
var AngularImagePickerImageComponent = (function () {
function AngularImagePickerImageComponent(formBuilder) {
var _this = this;
this.formBuilder = formBuilder;
this.effects = Object.keys(filters_1.Filters.effects);
this.imageForm = new forms_1.FormGroup({});
this.ReducedMemoryRepresentation = helpers_1.ReducedMemoryRepresentation;
/*
* Events
*/
this.value = new core_1.EventEmitter();
/*
* Default maximum image size (in px) to optimise and reduce the image size in memory
*/
this.maxWidth = 1080;
this.maxHeight = 1080;
this.readFile = function () {
return new Promise(function (res, rej) {
if (typeof _this.fileBefore === 'string') {
_this.imageBeforeBase64 = _this.fileBefore;
_this.sizeBefore = _this.imageBeforeBase64.length;
res();
}
else {
_this.reader.onload = function () {
_this.imageBeforeBase64 = _this.reader.result;
_this.sizeBefore = _this.imageBeforeBase64.length;
res();
};
_this.reader.readAsDataURL(_this.fileBefore);
}
});
};
this.loadImageBefore = function () {
return new Promise(function (res, rej) {
_this.imgElBefore = document.createElement('img');
_this.imgElBefore.src = _this.imageBeforeBase64;
_this.imgElBefore.onload = function () {
res();
};
});
};
this.defineNewSize = function () {
return new Promise(function (res, rej) {
// Get the images current width and height
var width = _this.imgElBefore.width;
var height = _this.imgElBefore.height;
// Set the WxH to fit the Max values (but maintain proportions)
if (width > height) {
if (width > _this.maxWidth) {
height *= _this.maxWidth / width;
width = _this.maxWidth;
}
}
else {
if (height > _this.maxHeight) {
width *= _this.maxHeight / height;
height = _this.maxHeight;
}
}
_this.imgElAfter = {
width: width,
height: height,
name: (_this.imgElAfter && _this.imgElAfter.name) ? _this.imgElAfter.name : _this.imgElBefore.name
};
res();
});
};
this.createManipulationCanvas = function () {
return new Promise(function (res, rej) {
// create a canvas object
// create a canvas object
_this.workingCanvas = document.createElement('canvas');
// Set the canvas to the new calculated dimensions
// Set the canvas to the new calculated dimensions
_this.workingCanvas.width = _this.imgElAfter.width;
_this.workingCanvas.height = _this.imgElAfter.height;
// Get Manipulation Canvas Context
// Get Manipulation Canvas Context
_this.workingCanvasContext = _this.workingCanvas.getContext('2d');
// Draw the image
// Draw the image
_this.workingCanvasContext.drawImage(_this.imgElBefore, 0, 0, _this.imgElAfter.width, _this.imgElAfter.height);
res();
});
};
this.applyEffect = function () {
return new Promise(function (res, rej) {
if (_this.effectName) {
var imageData = _this.workingCanvasContext.getImageData(0, 0, _this.workingCanvas.width, _this.workingCanvas.height);
var runEffect = filters_1.Filters.effects[_this.effectName];
runEffect(imageData, _this.imageForm.controls.brightnessScale.value, _this.imageForm.controls.blueScale.value, _this.imageForm.controls.greenScale.value, _this.imageForm.controls.redScale.value);
_this.workingCanvasContext.putImageData(imageData, 0, 0, 0, 0, _this.workingCanvas.width, _this.workingCanvas.height);
}
else {
_this.resetImage();
}
res();
});
};
this.makeNewImageFile = function () {
return new Promise(function (res, rej) {
_this.imageAfterBase64 = _this.workingCanvas.toDataURL('image/jpeg');
_this.sizeAfter = _this.imageAfterBase64.length;
var blob = helpers_1.ImageHandler.dataURItoBlob(_this.imageAfterBase64);
_this.fileAfter = helpers_1.ImageHandler.dataURItoFile(_this.imageAfterBase64);
_this.value.emit('ss');
res();
});
};
this.resetImage = function () {
return new Promise(function (res, rej) {
_this.workingCanvasContext.drawImage(_this.imgElBefore, 0, 0, _this.imgElAfter.width, _this.imgElAfter.height);
res();
});
};
this.setEffect = function (effectName) {
_this.imageForm.reset({
redScale: -255,
blueScale: -255,
greenScale: -255,
brightnessScale: 0,
}, {
emitEvent: false
});
_this.effectName = effectName;
_this.loadImages();
};
this.reader = new FileReader();
}
Object.defineProperty(AngularImagePickerImageComponent.prototype, "_file", {
/*
* @Input() File getter and setter
*/
get: /*
* @Input() File getter and setter
*/
function () {
return this.fileBefore;
},
set:
// Set in template as component attr
function (fileBefore) {
this.fileBefore = fileBefore;
this.loadImages();
},
enumerable: true,
configurable: true
});
AngularImagePickerImageComponent.prototype.ngOnInit = function () {
this.startImageForm();
};
AngularImagePickerImageComponent.prototype.startImageForm = function () {
var _this = this;
this.imageForm = this.formBuilder.group({
redScale: [0],
blueScale: [0],
greenScale: [0],
brightnessScale: [0],
});
this.imageForm.controls.blueScale.valueChanges
.subscribe(function (blueScale) {
if (_this.effectName) {
_this.loadImages();
}
});
this.imageForm.controls.greenScale.valueChanges
.subscribe(function (greenScale) {
if (_this.effectName) {
_this.loadImages();
}
});
this.imageForm.controls.redScale.valueChanges
.subscribe(function (redScale) {
if (_this.effectName) {
_this.loadImages();
}
});
this.imageForm.controls.brightnessScale.valueChanges
.subscribe(function (brightnessScale) {
if (_this.effectName) {
_this.loadImages();
}
});
};
AngularImagePickerImageComponent.prototype.loadImages = function () {
this.readFile()
.then(this.loadImageBefore)
.then(this.defineNewSize)
.then(this.createManipulationCanvas)
.then(this.applyEffect)
.then(this.makeNewImageFile);
};
AngularImagePickerImageComponent.decorators = [
{ type: core_1.Component, args: [{
selector: 'tzd-image-picker-image',
template: "<div class=\"angular-image-picker-image-wrapper\"> <div *ngIf=\"imageBeforeBase64\" title=\"image before effect\" class=\"angular-image-picker-image\"> <img [src]=\"imageBeforeBase64\"> </div> <div *ngIf=\"imageAfterBase64\" title=\"image after effect\" class=\"angular-image-picker-image\"> <img [src]=\"imageAfterBase64\"> </div> </div> <div *ngIf=\"debug\"> {{ReducedMemoryRepresentation(sizeBefore)}} -> {{ReducedMemoryRepresentation(sizeAfter)}} = {{(((sizeAfter / sizeBefore) * 100) - 100).toFixed(2)}}% </div> <div> <h3>Choose an effect</h3> <div style=\"display: flex; justify-content: space-around; flex-flow: row wrap; align-items: stretch;\"> <button style=\"margin: 8px 2px;\" *ngFor=\"let effect of effects\" type=\"button\" mat-raised-button color=\"accent\" (click)=\"setEffect(effect)\"> {{effect}} </button> <button style=\"margin: 8px 2px;\" type=\"button\" mat-raised-button color=\"default\" (click)=\"setEffect(undefined)\"> Reset </button> </div> <form role=\"form\" [formGroup]=\"imageForm\" *ngIf=\"effectName\"> <div *ngIf=\"effectName == 'Manual'\"> <div> <p class=\"adjustment-label\">Redscalse</p> <mat-slider name=\"redScale\" formControlName=\"redScale\" placeholder=\"Redscalse\" min=\"-255\" max=\"255\" step=\"5\" thumb-label=\"true\"></mat-slider> </div> <div> <p class=\"adjustment-label\">Greenscalse</p> <mat-slider name=\"greenScale\" formControlName=\"greenScale\" placeholder=\"Greenscalse\" min=\"-255\" max=\"255\" step=\"5\" thumb-label=\"true\"></mat-slider> </div> <div> <p class=\"adjustment-label\">Bluescalse</p> <mat-slider name=\"blueScale\" formControlName=\"blueScale\" placeholder=\"Bluescalse\" min=\"-255\" max=\"255\" step=\"5\" thumb-label=\"true\"></mat-slider> </div> </div> <div *ngIf=\"effectName != 'Manual' && effectName != 'Grey' && effectName != 'Light-Grey'\"> <p class=\"adjustment-label\">Effect Scale</p> <mat-slider name=\"brightnessScale\" formControlName=\"brightnessScale\" placeholder=\"Effect Scale\" min=\"-255\" max=\"255\" step=\"5\" thumb-label=\"true\"></mat-slider> </div> </form> </div> ",
styles: [".angular-image-picker-image-wrapper{display:flex;margin-top:24px}.angular-image-picker-image{flex:1}.angular-image-picker-image img{max-width:100%;max-height:100%}mat-slider{width:100%}.adjustment-label{text-align:center} "]
},] },
];
/** @nocollapse */
AngularImagePickerImageComponent.ctorParameters = function () { return [
{ type: forms_1.FormBuilder, },
]; };
AngularImagePickerImageComponent.propDecorators = {
"value": [{ type: core_1.Output },],
"imageAfterBase64": [{ type: core_1.Output },],
"imageBeforeBase64": [{ type: core_1.Output },],
"fileBefore": [{ type: core_1.Output },],
"fileAfter": [{ type: core_1.Output },],
"sizeAfter": [{ type: core_1.Output },],
"sizeBefore": [{ type: core_1.Output },],
"maxWidth": [{ type: core_1.Input },],
"maxHeight": [{ type: core_1.Input },],
"debug": [{ type: core_1.Input },],
"_file": [{ type: core_1.Input, args: ['file',] },],
};
return AngularImagePickerImageComponent;
}());
exports.AngularImagePickerImageComponent = AngularImagePickerImageComponent;
//# sourceMappingURL=angular-image-picker-image.component.js.map