1

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

Kiran Shinde
  • 5,732
  • 4
  • 24
  • 41
  • can you share what is your expected result and what is happening right now using some image? – Taimoor Qureshi May 18 '21 at 13:02
  • @TaimoorQureshi https://fengyuanchen.github.io/cropperjs/ See in this link, this is example of another cropper, where we can use arrow buttons to move the image, I want similar kind of functionality – Kiran Shinde May 18 '21 at 13:18

2 Answers2

1

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
    };
  }
Roman Bondar
  • 63
  • 6
-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.

Oana
  • 135
  • 1
  • 6
  • The `alignImage` option is not the solution at all for the problem he is facing. That only positions the cropping canvas, and has nothing to do with moving the image around like the resource in the link he provided. – Johan Aspeling Dec 27 '21 at 21:07