Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

ng-image-viewer

Redface17MIT0.1.7TypeScript support: included

Image viewer component for angular2

angular, angular2, image, image-viewer, rotate, coordinate

readme

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

changelog

0.1.7 (2016-11-01)

0.1.1 (2016-10-31)

0.1.0 (2016-10-30)