ngx-ratio-image
Version:
An Angular lib to show an image with variable ratio in container with a fixed ratio.
89 lines (84 loc) • 5.84 kB
JavaScript
import * as i0 from '@angular/core';
import { Input, Component } from '@angular/core';
import { DecimalPipe } from '@angular/common';
class RatioImageComponent {
constructor() {
this.src = '';
this.width = 0;
this.height = 0;
this.debug = false;
this.imageWidth = 0;
this.imageHeight = 0;
this.naturalWidth = 0;
this.naturalHeight = 0;
this.imageLeft = 0;
this.imageTop = 0;
this.ratioImage = 1;
this.ratioBox = 1;
this.scale = 1;
if (this.debug)
console.log('constructor', this.src);
}
ngAfterViewInit() {
if (this.debug)
console.log('ngAfterViewInit', this.src, this.width, this.height);
}
onImageLoad(img) {
if (this.debug)
console.log('onImageLoad ', img);
if (img) {
this.naturalWidth = img.naturalWidth;
this.naturalHeight = img.naturalHeight;
if (this.width > 0 && this.height > 0) {
this.calculate();
}
}
}
ngOnChanges() {
this.calculate();
}
calculate() {
this.ratioImage = this.naturalWidth / this.naturalHeight;
this.ratioBox = this.width / this.height;
if (this.ratioBox > this.ratioImage) {
this.scale = this.height / this.naturalHeight;
this.imageLeft = (this.width - this.naturalWidth * this.scale) / 2;
}
else if (this.ratioBox < this.ratioImage) {
this.scale = this.width / this.naturalWidth;
this.imageTop = (this.height - this.naturalHeight * this.scale) / 2;
}
else {
this.scale = this.width / this.naturalWidth;
this.imageLeft = 0;
this.imageTop = 0;
}
if (this.debug)
console.log('calculate', this.src, this.naturalWidth + ' x ' + this.naturalHeight);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: RatioImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: RatioImageComponent, isStandalone: true, selector: "ngx-ratio-image", inputs: { src: "src", width: "width", height: "height", debug: "debug" }, usesOnChanges: true, ngImport: i0, template: "<div\n [style.position]=\"'relative'\"\n [style.z-index]=\"2\"\n [style.border]=\"debug ? '1px solid red' : ''\"\n [style.width]=\"width + 'px'\"\n [style.height]=\"height + 'px'\"\n >\n <img\n class=\"img-background\"\n #img\n [src]=\"src\"\n [style.position]=\"'absolute'\"\n [style.z-index]=\"1\"\n [style.filter]=\"'blur(5px)'\"\n [style.opacity]=\"0.5\"\n [width]=\"width\"\n [height]=\"height\"\n [style.overflow]=\"'hidden'\"\n (load)=\"onImageLoad(img)\"\n alt=\"\"\n />\n <img\n class=\"img-main\"\n [src]=\"src\"\n [width]=\"naturalWidth * scale\"\n [height]=\"naturalHeight * scale\"\n [style.position]=\"'absolute'\"\n [style.z-index]=\"2\"\n [style.left]=\"imageLeft + 'px'\"\n [style.top]=\"imageTop + 'px'\"\n alt=\"\"\n />\n</div>\n@if (debug) {\n <div style=\"margin-top: 10px\">\n <div>Container: {{ width }} x {{ height }}</div>\n <div>Natural: {{ naturalWidth }} x {{ naturalHeight }}</div>\n <div>Pos: {{ imageLeft }} , {{ imageTop }}</div>\n <div>Scale: {{ scale | number: '0.0-2' }}</div>\n <div>\n Ratio Box , Image: {{ this.ratioBox | number: '0.0-2' }} : 1 , {{ this.ratioImage | number: '0.0-2' }} : 1\n </div>\n </div>\n}\n", dependencies: [{ kind: "pipe", type: DecimalPipe, name: "number" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: RatioImageComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-ratio-image', imports: [DecimalPipe], template: "<div\n [style.position]=\"'relative'\"\n [style.z-index]=\"2\"\n [style.border]=\"debug ? '1px solid red' : ''\"\n [style.width]=\"width + 'px'\"\n [style.height]=\"height + 'px'\"\n >\n <img\n class=\"img-background\"\n #img\n [src]=\"src\"\n [style.position]=\"'absolute'\"\n [style.z-index]=\"1\"\n [style.filter]=\"'blur(5px)'\"\n [style.opacity]=\"0.5\"\n [width]=\"width\"\n [height]=\"height\"\n [style.overflow]=\"'hidden'\"\n (load)=\"onImageLoad(img)\"\n alt=\"\"\n />\n <img\n class=\"img-main\"\n [src]=\"src\"\n [width]=\"naturalWidth * scale\"\n [height]=\"naturalHeight * scale\"\n [style.position]=\"'absolute'\"\n [style.z-index]=\"2\"\n [style.left]=\"imageLeft + 'px'\"\n [style.top]=\"imageTop + 'px'\"\n alt=\"\"\n />\n</div>\n@if (debug) {\n <div style=\"margin-top: 10px\">\n <div>Container: {{ width }} x {{ height }}</div>\n <div>Natural: {{ naturalWidth }} x {{ naturalHeight }}</div>\n <div>Pos: {{ imageLeft }} , {{ imageTop }}</div>\n <div>Scale: {{ scale | number: '0.0-2' }}</div>\n <div>\n Ratio Box , Image: {{ this.ratioBox | number: '0.0-2' }} : 1 , {{ this.ratioImage | number: '0.0-2' }} : 1\n </div>\n </div>\n}\n" }]
}], ctorParameters: () => [], propDecorators: { src: [{
type: Input,
args: [{ required: true }]
}], width: [{
type: Input,
args: [{ required: true }]
}], height: [{
type: Input,
args: [{ required: true }]
}], debug: [{
type: Input
}] } });
/*
* Public API Surface of ngx-ratio-image
*/
/**
* Generated bundle index. Do not edit.
*/
export { RatioImageComponent };
//# sourceMappingURL=ngx-ratio-image.mjs.map