How to rotate an image using Angular 5 and angular

Question

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 rotate the image but just for once.

What issues I'm facing:

• As mentioned in the official docs, I'm not able to use this.angularCropper.cropper.rotate(degreeInNumber); it gives this error: Cannot read property 'rotate' of undefined .
• As it is a wrapper around CropperJS a popular JS image library, so I tried CropperJS's syntax this.cropper.rotate(degreeInNumber); (inside rotateLeft() function) and it works but just for once. When I call rotateLeft() function for the second time it does not work.
• Also, despite mentioning crossorigin in <input>, I'm getting Cannot read property 'checkCrossOrigin' of undefined

Here's my code for app.component.html:

<input crossorigin type='file' (change)="readUrl($event)">
<img crossorigin id="img" [src]="url">

<div id="target"></div>

<div [hidden]="!(url != null)">
  <angular-cropper crossorigin [cropperOptions]="cropper" [imageUrl]="url" #angularCropper></angular-cropper>
</div>

<br><br>
<button (click)="rotateLeft()">Left</button>               

And, my app.component.ts:

import { Component } from '@angular/core';

import { AngularCropperjsComponent } from 'angular-cropperjs';
import { ViewChild } from '@angular/core';

import * as Cropper from 'cropperjs/dist/cropper';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  @ViewChild('angularCropper') public angularCropper: AngularCropperjsComponent;

  title = 'app';
  tilt = 0;
  url: string = null;
  cropper: Cropper;

  rotateLeft() {
    let image = document.querySelector('#img');
    let canvas = document.querySelector('#canvas');
    let target = document.querySelector('#target');
    this.tilt -= 90;
    let that = this;
    this.cropper = new Cropper(image, {
      minContainerWidth: 400,
      minContainerHeight: 400,
      minCanvasWidth: 250,
      minCanvasHeight: 250,
      ready: function() {
        this.cropper.rotate(that.tilt);          <--- This works, but only for ONCE
      }
    });

    this.angularCropper.cropper.rotate(66);    <--- This does NOT work
    console.log(this.cropper)

  }

  // This is for showing the uploaded image to <img crossorigin id="img" [src]="url">
  readUrl(event: any) {
    if (event.target.files && event.target.files[0]) {
      const reader = new FileReader();
      reader.onload = (e: any) => {
        this.url = e.target.result;
      };
      reader.readAsDataURL(event.target.files[0]);
    }
  }
}

I'm pretty new to this can anyone please point out what am I missing/ doing wrong?

Also, how do I get back the cropped image?

Answer 1

  <div class="contant-size-container" style="overflow: hidden; width: 500px; height: 500px">
    <div class="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"
    >
      <img class="dynamic-img"
        [style.height.px]="height"
        [style.width.px]="width"
        [style.transform]="'rotate(' + rot + 'deg)'"
        src="{{file.url}}"
      />
    </div>
  </div>
  <div style="margin-top: 20px">
    <input [(ngModel)]="height"/>
    <input [(ngModel)]="width"/>
    <input [(ngModel)]="rot"/>
  </div>
  <div style="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.