Ng image viewer

Ng image viewer is the image component project that can handle image related properties.

Features

new features will be applied in next version.

• Coordinate change

How to use

And here's some code! :+1:

• Import NgImageViewerModule in a specific module

@NgModule({
  imports: [ImageViewerModule]
  declarations: [TestComponent]
})
export class TestModule {}

• Set input properties to describe a image view. All attributes bind to image view component (*impotant: unless setting a value to each attribute, default value will be set)

export class TestComponent {
  imageUrl:string = 'guilin.jpg';
  type:string = 'px';
  width:number = 500;
  height:number = 738;
  frameSize:number = 300;
  repeatCoordinate:string = 'x';
  backgroundImgCoordinateX:number = -285;
  backgroundImgCoordinateY:number = 10;
  borderImageRepeat:string = 'round';
  imgFrameStyle:{} = {};
  evtEmitter = new EventEmitter();

  leftEvent(e:Event) {
    this.evtEmitter.emit({
      'event': e,
      'direction': 'left',
      'cb': (x, y) => {console.log('left cb works');}
    });
  }

  rightEvent(e:Event) {
    this.evtEmitter.emit({
      'event': e,
      'direction': 'right',
      'cb': (x, y) => {console.log('right cb works');}
    });
  }
}

• Bind pre-defined attributes to image view component (please check attributes options)

<image-viewer [imageUrl]="imageUrl"
                 [type]="type"
                 [width]="width"
                 [height]="height"
                 [frameSize]="frameSize"
                 [repeatCoordinate]="repeatCoordinate"
                 [backgroundImgCoordinateX]="backgroundImgCoordinateX"
                 [backgroundImgCoordinateY]="backgroundImgCoordinateY"
                 [borderImageRepeat]="borderImageRepeat"
                 [imgFrameStyle]="imgFrameStyle"
                 [coordinateEmitter]="evtEmitter">Image viewer loading...
 </image-viewer>
 <button (click)="leftEvent($event)">left</button>
 <button (click)="rightEvent($event)">right</button>

Available attribute options:

• imageUrl(defaultValue: none): image url
• type(defaultValue: 'px'): measurement type ex: px, em and so on
• width(defaultValue: 200):
• height(defaultValue: 200):
• frameSize(defaultValue: 10):
• repeatCoordinate(defaultValue: 'x'): repeatCoordinate
• backgroundImgCoordinateX(defaultValue: 0):
• backgroundImgCoordinateY(defaultValue: 0):
• borderImageRepeat(defaultValue: 'round'): [ stretch | repeat | round | space ]
• imgFrameStyle(defaultValue: {}): additional css styles
• coordinateEmitter(defaultValue: none): Event Emitter to do customised actions

License

MIT © Daehwan Lee