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

Posted 2023-02-25

【中文标题】如何旋转base64图像并将其保存为角度2或以上？

【英文标题】：How to rotate base64 image and save it in angular 2 or above?

【发布时间】：2018-07-17 02:45:55

【问题描述】：

我用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

【问题讨论】：

为此目的使用canvas。

使用画布旋转并保存图像。这是一个如何在画布上旋转图像的示例：***.com/questions/17411991/html5-canvas-rotate-image您可以通过 toDataURL 保存图像 - developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/…

有没有其他方法可以使用纯角度或角度 api 解决问题...？ --kosh，我还想增加图像中的亮度/不透明度等并将其保存....为此，我还为视图动态完成了 css 更改，但没有使用任何角度方式....

【参考方案1】：

您可以在这里Stackblitz找到解决方案。