Ngx-image-cropper Shift Image

Question

I am using ngx-image-cropper, I have used all of its functionality, like zoom, rotate.

Now the real problem is when I zoom the image it's scaled from center, now if I want to crop image from extreme left side or extreme right side, I am helpless, as there is no provision of shift image, Can anyone suggest me how can add functionality of shift image in ngx-image-cropper.

Stackblitz example : https://stackblitz.com/edit/image-cropper

Answer 1

Have you consulted the library documentation?

Your answer is there https://github.com/Mawi137/ngx-image-cropper.

For example you can make use of alignImage or other inputs available.

Answer 2

You have to add buttons to your template (.html file):

<button (click)="moveTop()">Move top</button>
<button (click)="moveRight()">Move right</button>
<button (click)="moveBottom()">Move bottom</button>
<button (click)="moveLeft()">Move left</button>

After that go to to your component (.ts file) and write next:

import { ImageTransform } from 'ngx-image-cropper';

  translateH = 0;
  translateV = 0;
  transform: ImageTransform = {};

  moveLeft() {
    this.translateH = this.translateH - 5;
    this.transform = {
      ...this.transform,
      translateH: this.translateH
    };
  }

  moveTop() {
    this.translateV = this.translateV - 5;
    this.transform = {
      ...this.transform,
      translateV: this.translateV
    };
  }

  moveRight() {
    this.translateH = this.translateH + 5;
    this.transform = {
      ...this.transform,
      translateH: this.translateH
    };
  }

  moveBottom() {
    this.translateV = this.translateV + 5;
    this.transform = {
      ...this.transform,
      translateV: this.translateV
    };
  }