How To Rotate An Image Using Angular 5 And Angular-cropperjs?

My objective: To upload image file in my browser, edit(crop & rotate) it and download/upload it. What I have achieved so far: I am just able to

Solution 1:

<divclass="contant-size-container"style="overflow: hidden; width: 500px; height: 500px"><divclass="dynanmic-img-container"style="overflow: hidden; margin: 0;"
      [style.margin-left.px]="-left"
      [style.margin-top.px]="-top"
      [style.width.px]="width - right"
      [style.height.px]="height - bottom"
    ><imgclass="dynamic-img"
        [style.height.px]="height"
        [style.width.px]="width"
        [style.transform]="'rotate(' + rot + 'deg)'"src="{{file.url}}"
      /></div></div><divstyle="margin-top: 20px"><input [(ngModel)]="height"/><input [(ngModel)]="width"/><input [(ngModel)]="rot"/></div><divstyle="margin-top: 20px"><input [(ngModel)]="top"/><input [(ngModel)]="right"/><input [(ngModel)]="bottom"/><input [(ngModel)]="left"/></div>

I have never used angularCropper, but this seems to do a pretty good job of allowing a user to type in numbers for adjusting size, rotating and cropping. This works best if the image remains rotated at a multiple of 90 degrees though. The image becomes cropped at an angle because of the wrapping div that remains the same width and height of the image. You could have this div rotate instead of the img, but then you would need to use css to make sure the image remains at a distance away from the outermost div such that it does not get cutoff.

The values right, left, top, bottom, width, height and rot are all global variables in my typescript file.

The outer most div, constant-size-container, is used for keeping all other elements from moving on the screen when the inner div and img change size.

This is a little overly hacky in my opinion, but it is a decent start at doing your own image customizing. More css can be used to better position the image and help to retain its ratio.

Solution 2:

I checked your answer everything is correct but I use functions to call rotate functions.

<div #imageIDclass="modal-body"style="height: auto"><!-- Cropper --><angular-cropper
        #angularCropper
        [cropperOptions]="config"
        (export)="resultImageFun($event)"
        [imageUrl]="editedFile"
      ></angular-cropper></div><divclass="modal-footer"><imgclass="rotate"src="../../assets/images/rotateRight.png" (click)="cropperRotate('right')" /><imgclass="rotate"src="../../assets/images/rotateLeft.png" (click)="cropperRotate('left')" /><buttontype="button"class="btn btn-secondary"data-dismiss="modal">
          Close
        </button><buttontype="button"class="btn btn-primary"data-dismiss="modal" (click)="savecropedPhoto()">Crop</button></div>

AND my .ts file

 cropperRotate(data) {
console.log('coming');
this.angularCropper.exportCanvas();
switch (data) {
  case 'right':
    this.angularCropper.cropper.rotate(90);
    break;
  case 'left':
    this.angularCropper.cropper.rotate(-90);
    break;
  default:
    break;
}}

Maybe it will help. It is working for me. angular version:13

Config for angular cropper:

config= {
dragMode:'move',
background:true,
movable:true,
rotatable:true,
scalable:true,
zoomable:true,
viewMode:1,
checkImageOrigin:true,
checkCrossOrigin:true,
ready:function() {
  this.cropper.rotate(this.tilt);
}  };