angular2-resizing-cropping-image

Resizing & cropping images with Angular 2

demo

Install

# install the repo with npm
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 {}