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

Question

我已经使用 css 来实现旋转效果

<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'] })

我认为使用 css 我们无法保存旋转的图像。有没有其他方法可以旋转它并保存它...我正在发送 base64 有服务级别的数据。提前致谢...旋转的 base64 数据将是 gr8

Answer 1

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