el-image 实现翻转照片并保存

需求： （老板亲自提的） 实现放大预览而且前后翻页 首先想到的就是 el-image。功能比较齐全，使用也比较简单。 例子：

<div class="demo-image__preview">
<el-image style="width: 100px; height: 100px" :src="url" :preview-src-list="srcList"> 
</el-image>
</div>
<script>
export default {
        data() {
        return { 
        url:   'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', 
          srcList: [ 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg', 'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg' 
  ]
  }
  }
  } 
</script>

我们在次基础上继续实现，现在缺少一个 保存按钮，我们在el-image 标签上加一个click 事件，

<el-image
    :preview-src-list="srcList"
    :src="picUrl"
    @click="clickImage"
  />
  ===================================
     clickImage() {
    
      this.$nextTick(() => {
       
        const wrapper = document.getElementsByClassName(
          "el-image-viewer__actions__inner"
        );
        const downImg = document.createElement("i");
        downImg.setAttribute("class", "el-icon-check");
         wrapper[0].appendChild(downImg);
      
        if (wrapper.length > 0) {
          this.wrapperElem = wrapper[0];
          this.cusClickHandler();
        }
      });
    },
      /**
     * 给按钮添加点击事件
     */
    cusClickHandler() {
      this.wrapperElem.addEventListener("click", this.hideBtn);
    },
    hideBtn(e) {
      const className = e.target.className;
      if (className === "el-icon-check") {
        const imgUrl = document.getElementsByClassName(
          "el-image-viewer__canvas"
        )[0].children[0];
        this.uploadimg(imgUrl);
      }
    },
     uploadimg(element) {
      html2canvas(element, {
        useCORS: true,
      }).then((canvas) => {
        const file = new FormData();
        const files = canvas.toDataURL("image/jpeg");
        var blob = this.dataURLtoBlob(files);
        var fileData = this.blobToFile(blob);
        file.append("file", fileData, this.fileName);
        // 调用接口

        uploadWorkPic({ file }).then((res) => {
        
          const data = res + "?=" + new Date().getTime(); // 避免图片缓存 加时间戳
              // data 替换老data 进行展示。
             
          this.$message.success("保存成功");
          
       
        });
      });
    },

一个简单的旋转图片并保存的功能已经 实现了，但是实际上的需求要稍微复杂点，它是多张图片保存，同步更新，主要难点是获取修改的图片索引，前进-后退按钮上添加事件监听即可。

    clickImage() {
      if (this.imgIndex < 0) {
        this.imgIndex = this.imgList.findIndex((el) => {
          return el == this.srcUrl;
        });
      }

      this.picUrl = this.srcUrl;
      this.imgIndex = this.index;  
      this.imgList = deepClone(this.srcList);
      this.$nextTick(() => {
      // 获取后退按钮
        const prevBtn = document.querySelector(".el-image-viewer__prev");
        prevBtn.addEventListener("click", this.prevEvent);
          // 获取关闭按钮
        const closeBtn = document.querySelector(".el-image-viewer__close");
        // 获取遮罩
        const maskDom = document.querySelector(".el-image-viewer__mask");
        closeBtn.addEventListener("click", this.clsoeEvent);
        maskDom.addEventListener("click", this.clsoeEvent);
        this.fileName =
          this.srcUrl.split("/")[this.srcUrl.split("/").length - 1];
          // 获取前进按钮
        const nextBtn = document.querySelector(".el-image-viewer__next");
        nextBtn.addEventListener("click", this.nextEvent);
        const wrapper = document.getElementsByClassName(
          "el-image-viewer__actions__inner"
        );
        const downImg = document.createElement("i");
        downImg.setAttribute("class", "el-icon-check");
        const all_permission = "*:*:*";
        const permissions = store.getters && store.getters.permissions;
        const permissionFlag = ["smartScreen:workPic:upload"];
        const hasPermissions = permissions.some((permission) => {
          return (
            all_permission === permission || permissionFlag.includes(permission)
          );
        });

        if (hasPermissions) {
          wrapper[0].appendChild(downImg);
        }
        if (wrapper.length > 0) {
          this.wrapperElem = wrapper[0];
          this.cusClickHandler();
        }
      });
    },
     prevEvent() {
      if (this.imgIndex > 0) {
        this.imgIndex--;   // 更新索引
        let val = this.srcList[this.imgIndex];
        this.fileName = val.split("/")[val.split("/").length - 1]; // 更新文件名
      }
    },
    nextEvent() {
      if (this.imgIndex < this.srcList.length) {
        this.imgIndex++;
        let val = this.srcList[this.imgIndex];
        this.fileName = val.split("/")[val.split("/").length - 1];
      }
    },
    

最终效果