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>

效果如下：

三、旋转保存重新渲染

当图片可以旋转保存之后会重新图片没有重新渲染的情况，这是因为浏览器的缓存机制，所以我们需要给图片进行重新渲染，增加一个时间戳，在src上面也需要绑定。

<template>
 <el-image  :src="'@/assets/xxx/xxx'+'?'+timestamp" 
             @click='clickImage('@/assets/xxx/xxx')' '/>
</template>

<script>
export default{
  data(){
    return{
            img_url :'',//存放图片路径
            image_id:0,//渲染图片
        }
  },
  created(){
   this.timestamp = new Date();
  },
  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();
                this.timestamp = new Date();
            })
          }
        }
      }
    }
  }
}
</script>