vue通过element-image组件实现旋转后保存图片

初级小菜鸟记录一下遇到的问题，这周遇到一个需求，将用户在APP端上传的图片，在后台管理系统可以进行旋转操作后覆盖原图保存，是因为用户拍照上传的角度有的受手机影响，有的也只管拍了传上来就行，造成后续对图片处理存在问题

一开始就只有这样一个上传图片功能，也没有预览功能；

 去element找了一下发现image组件可以对图片进行预览，还可以旋转，心想这不是就成了吗？ 

 于是乎赶紧加上去，这时候问题来了，旋转了我怎么保存呢？

查了一下，可以这样，通过操作节点去增加一个保存按钮

<el-image
  :preview-src-list="
    form.material.map((i) =>form.material[5].path + `?n=${new Date().getMilliseconds()}`)
  "
  v-if="form.material[5].path"
  :src="form.material[5].path + `?n=${new Date().getMilliseconds()}`"
  class="avatar"
  @click="clickImage(5)"
/>

// 预览 添加按钮
clickImage(idx) {
    this.num = idx;
    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) {
        this.wrapperElem = wrapper[0];
        this.cusClickHandler();
      }
    });
  },

保存按钮有了， 然后就是拿到旋转后的图片保存即可！~

怎么拿到呢？因为旋转只是改了图片的样式从而展示出来，并未改到真正的图片，这个时候查到可以通过html2canvas插件通过canvas绘制图片后下载图片，于是有了下面这段代码

    // 给按钮添加点击事件
    cusClickHandler() {
      this.wrapperElem.addEventListener("click", this.hideCusBtn);
    },
    // 点击事件
    hideCusBtn(e) {
      let className = e.target.className;
      if (className === "el-icon-check") {
        let imgUrl = document.getElementsByClassName(
          "el-image-viewer__canvas"
        )[0].children[0].src;
        this.downloadImage();
      }
      if (className === "el-icon-refresh-right" || "el-icon-refresh-left") {
        var element = document.getElementsByClassName("el-image-viewer__img");
        html2canvas(element[0]).then((canvas) => {
          this.imgUrl = canvas.toDataURL("image/png");
            //base64格式的图片
        });
      }
    },
    downloadImage() {
      let aLink = document.createElement("a");
      let evt = document.createEvent("HTMLEvents");
      evt.initEvent("click", true, true);
      aLink.download = "test.jpg";
      aLink.href = URL.createObjectURL(blob);
      aLink.click();
    },

这样一通操作下来，图片是能下载了，但下载的是空白图片……降低html2canvas插件的版本试了也不行，这时候给后端说了一下这个问题于是他说他来处理图片旋转问题，我只负责传参就行，瞬间如释重负

参数是图片链接+旋转角度

通过找到图片节点的style的transform属性，通过字符串截取拿到旋转的角度发给后端

if (className === "el-icon-refresh-right" || "el-icon-refresh-left") {
   var imgUrl = this.form.material[this.num].path;
   var element = document.getElementsByClassName("el-image-viewer__img");
   var degA = element[0].style.transform.substring(16);
   var deg = degA.substring(0, degA.length - 4);
 }

后端直接将图片旋转，图片url未变，此时存在图片更新问题，刷新后图片也未改变，由于浏览器有缓存机制， 试了下清除缓存才会更新，所以给图片路径加了一个随机数，让浏览器以为这是不同的资源从而加载最新内容

<el-image
   :preview-src-list="
   form.material.map((i) =>form.material[5].path + `?n=${new Date().getMilliseconds()}`) "
   v-if="form.material[5].path"
   :src="form.material[5].path + `?n=${new Date().getMilliseconds()}`"
   class="avatar"
   @click="clickImage(5)"
/>

 这个时候已经处理得差不多了，还有点小bug，旋转后预览图片会记录之前的角度总之就是显示有问题，如图

所以直接干脆的把遮罩干掉：

 let close = document.querySelector(".el-icon-circle-close");
 close.click();

 最后大功告成~！撒花~~~

贴个小图感受一下

完整代码：

// 预览 添加按钮
clickImage(idx) {
     this.num = idx;
      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) {
          this.wrapperElem = wrapper[0];
          this.cusClickHandler();
        }
      });
    },
// 给按钮添加点击事件
cusClickHandler() {
     this.wrapperElem.addEventListener("click", this.hideCusBtn);
  },
    // 点击事件
 hideCusBtn(e) {
     let className = e.target.className;
      // 旋转照片
     if (className === "el-icon-refresh-right" || "el-icon-refresh-left") {
      // console.log(this.num);
      var imgUrl = this.form.material[this.num].path;
      var element = document.getElementsByClassName("el-image-viewer__img");
      var degA = element[0].style.transform.substring(16);
      var deg = degA.substring(0, degA.length - 4);
      }
    // 确认修改
  if (className === "el-icon-check") {
      // 请求后台旋转图片
      rotate({ url: imgUrl, degrees: deg }).then((res) => {
        if (res.code == 1) {
          this.$message({
            type: "success",
            message: res.msg ? res.msg : "修改成功",
          });
        } else {
          this.$message({
            type: "error",
            message: res.msg ? res.msg : "失败",
          });
        }
      });
      let close = document.querySelector(".el-icon-circle-close");
      close.click();
      studentDetail(this.stuid.bm_id).then((res) => {
        this.form.material = res.data.material;
      });
    }
  },