如何旋转base64图像并将其保存为角度2或以上？

Question

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

Answer 1

您可以在此处找到解决方案Stackblitz 。