0

I have used css for rotation effect

<img class="" [hidden]="cropperDisp2" [style.filter]="range" [@rotatedState]='state' (click)="testfun($event)" id="imgid" [src]="">

document.getElementById('imgid').setAttribute('src', this.imagePath); 

Component({
selector: 'app-image-editor',
templateUrl: './image-editor.component.html',
animations: [
  // Each unique animation requires its own trigger. The first argument of the trigger function is the name
    trigger('rotatedState', [
        state('rotate0', style({
            transform: 'rotate(0)'
        })),
      // state('rotate1', style({ transform: 'rotate(-45deg)',width:'55%',height:'55%',marginTop:'14%',marginLeft:'25%' })),
        state('rotate2', style({
            transform: 'rotate(-90deg)'
        })),
      //  state('rotate3', style({ transform: 'rotate(-135deg)',width:'55%',height:'55%',marginTop:'14%',marginLeft:'25%'})),
        state('rotate4', style({
            transform: 'rotate(-180deg)'
        })),



      //  transition('rotated => rotate0', animate('1500ms ease-out')),
      //  transition('rotate0 => rotated', animate('400ms ease-in'))
    ])
],
styleUrls: ['./image-editor.component.css'] })

I think with css we cannot save the rotated image.Is there any alternate way to rotate it and save it ...i am sending base64 has data at service level.Thanks in advance...rotated base64 data will be gr8

user2025069
  • 101
  • 2
  • 7
  • 1
    Use `canvas` for this purpose. – Kosh Jul 17 '18 at 03:06
  • Use canvas to rotate and save the image. Here is an example how to rotate image on canvas: https://stackoverflow.com/questions/17411991/html5-canvas-rotate-image You can save image via toDataURL - https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL – Vasyl Moskalov Jul 17 '18 at 03:10
  • is there no other way to solve the issue using pure angular or angular api's...? --kosh and i also want to increase the brightness/opacity etc in the image and save it....for that also i dynamically done css change for the view but not used any angular way .... – user2025069 Jul 18 '18 at 09:20

1 Answers1

0

You can find the solution here Stackblitz.

Alekya
  • 239
  • 5
  • 15