el-image实现旋转修改保存

2024.4.8今天我学习了用el-image组件如何实现图片的旋转然后保存旋转之后的图片，

代码如下：

一、新增确定按钮。

<template>
 <el-image  src='@/assets/xxx/xxx' @click='clickImage('@/assets/xxx/xxx')'/>
</template>

<script>
export default{
  data(){
    return{
            img_url :''//存放图片路径
        }
  }
  methods:{
    clickImage(url){
      this.img_url = url//获取选中图片路径
      this.$nextTick(() => {
        let wrapper = document.getElementsByClassName(
          'el-image-viewer__actions__inner'
        )
        let downImg = document.createElement('i')
        downImg.setAttribute('class', 'el-icon-check')
        wrapper[0].appendChild(downImg)
        if (wrapper.length > 0) {
          wrapper[0].addEventListener('click', event => {
            this.cusClickHandler(event); // 通过箭头函数将事件对象传递给cusClickHandler 方法
          });
        }
      })
     }
  }
}
</script>

二、写新增按钮的逻辑

主要用document.getElementsByClassName获取相关按钮的类名，通过类名设置点击事件，然后拿到图片的旋转角度，最重要的一点就是要拿到旋转之后的图片，目前我想到有两种方法：

（1）旋转好的图片前端用画布画出来然后传给后端存储。

（2）把旋转的图片路径和旋转角度传给后端，让后端旋转好图片进行覆盖。（目前用的这种）

<template>
 <el-image  src='@/assets/xxx/xxx' @click='clickImage('@/assets/xxx/xxx')'/>
</template>

<script>
export default{
  data(){
    return{
            img_url :''//存放图片路径
        }
  }
  methods:{
    clickImage(url){
      this.img_url = url//获取选中图片路径
      this.$nextTick(() => {
        let wrapper = document.getElementsByClassName(
          'el-image-viewer__actions__inner'
        )
        let downImg = document.createElement('i')
        downImg.setAttribute('class', 'el-icon-check')
        wrapper[0].appendChild(downImg)
        if (wrapper.length > 0) {
          wrapper[0].addEventListener('click', event => {
            this.cusClickHandler(event); // 通过箭头函数将事件对象传递给cusClickHandler 方法
          });
        }
      })
     },

    cusClickHandler(e) {
      if (e !== undefined) {//点击图片会触发，所以要判断
        // 旋转照片（顺时针||逆时针）
        if (e.target.className === 'el-icon-refresh-right' || 'el-icon-refresh-left') {
          let imgUrl = this.img_url
          let element = document.getElementsByClassName('el-image-viewer__img')
          let degA = element[0].style.transform.substring(16)
          let deg = degA.substring(0, degA.length - 4)//拿到旋转角度
          // 确认修改
          if (e.target.className === 'el-icon-check') {
            let upload_data = {
              url: imgUrl,//图片路径
              angle: -deg//图片旋转角度
            }
                //调用接口
            xxxxxxxx(upload_data).then(res => {
                 //关闭页面
                let close = document.querySelector('.el-image-viewer__close')
                close.click()
             
            })
          }
        }
      }
    }
  }
}
</script>

效果如下：

原文地址：https://blog.csdn.net/qq_53986004/article/details/137510451

免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！