Resizing & cropping images with Angular 2
demo
Install
npm install angular2-resizing-cropping-image
Example
# import
import { lyResizingCroppingImagesModule } from 'angular2-resizing-cropping-image';
@NgModule({
imports : [LyResizingCroppingImagesModule, ...],
})
import { Component } from '@angular/core';
@Component({
selector: 'image-upload',
styles: [`
:host{
display: block
}
`],
template: `
<input (change)="_img.imgChange($event)" type="file">
<button (click)="_img.zoom('+')">+</button>
<button (click)="_img.zoom('-')">-</button>
<button (click)="_img.center()">center</button>
<ly-cropping-img #_img format="png"></ly-cropping-img>
<div>Format input: {{_img._img.type}}</div>
<br />
<div>Format output: {{_img.format}}</div>
<br />
<div>Result: </div>
<br />
<img [src]="_img.imgCrop">
<br />
<input [(ngModel)]="_img.sizeW" placeholder="_img size W">
<input [(ngModel)]="_img.sizeH" placeholder="_img size H">
<input [(ngModel)]="_img.img" placeholder="Img">
`
})
export class imgUpload {
constructor(){
}
}
