vue.js 原生js app端实现图片旋转、放大、缩小、拖拽

本文链接：https://blog.youkuaiyun.com/qq_45444035/article/details/142598384

20241017 fix: 图片过大导致canvas 绘制失败（解决：转blob格式）

20241025 fix: 图片不清晰，旋转速度慢（解决：放大图片修改旋转速度）

// 下面代码种修改画布变成4倍大小

const maxDim = Math.max(img.width*4, img.height*4);

// 加入在这一行 ctx.rotate((degree * Math.PI) / 180); 下面加入

ctx.scale(4, 4);

// 旋转修改为：不重绘用css样式搞定

leftPhoto() {

let element = document.getElementById('imageId')

element.style.transform = `rotate(${this.degree-=90}deg)`

},

rightPhoto() {

let element = document.getElementById('imageId')

element.style.transform = `rotate(${this.degree+=90}deg)`

},

效果图：

旋转

放大：手机上可以双指放大缩小拖拽

代码实现：

html

 <div id="home" class="" v-cloak>
  <!-- 上面三个按钮 图片自己解决 -->
      <div class="headImage" v-if="showBtn">
        <div class="leftPhoto" @click="leftPhoto()">
          <img
            style="width: 2.2rem; height: 2.2rem"
            src="../../../common/image/left_xuanzhuan.png"
            alt=""
          />
        </div>
        <div class="rightPhoto" @click="rightPhoto()">
          <img
            style="width: 2.2rem; height: 2.2rem"
            src="../../../common/image/right_xuanzhuan.png"
            alt=""
          />
        </div>
        <div class="comeBack" @click="comeBack()">
          <img
            style="width: 2.4rem; height: 2.4rem"
            src="../../../common/image/fanhui.png"
            alt=""
          />
        </div>
      </div>
     <!-- 展示图片位置 -->
      <div class="page"> 
        <!--  缩放 -->
        <div class="pinch-zoom">
          <img
            v-show="showBtn"
            id="imageId"
            style="height: 95% !important; width: 100%; object-fit: contain"
            :src="graphPhoto"
          />
        </div>
      </div>
    </div>

js代码

<script type="text/javascript">
      let vm = new Vue({
        el: "#home",
        data() {
          return {
            photoUrl: "", //图片地址
            photoOldUrl: "", //图片地址原图base64需要保留
            showBtn: false, //判断是否显示按钮
            degree:0, 初始化角度默认是0
          };
        },
       methods: {
          // 返回
          comeBack() {
            // 根据逻辑返回就行
          },
          leftPhoto() {
            // 旋转需要拿到原图旋转响应角度之后重绘
            this.rotateBase64Image(this.photoOldUrl, this.degree-=90) // 旋转90度
              .then((rotatedBase64) => {
                this.photoUrl = rotatedBase64;
              });
          },
          rightPhoto() {
            this.rotateBase64Image(this.photoOldUrl, this.degree+=90) // 旋转90度
              .then((rotatedBase64) => {
                this.photoUrl = rotatedBase64;
              });
          },
          // 接口查询
          getPhoto() {
            let that = this;
              //.... 你的接口返回的数据 base 如果没有可以暂时用本地的图片代替一下
              if (base) {
                that.photoUrl = "../../../common/image/WechatIMG624.jpg";
                that.photoOldUrl = "../../../common/image/WechatIMG624.jpg";
                that.showBtn = true; //是否展示按钮
                that
                  .rotateBase64Image(that.photoOldUrl, 0) // 默认调用 旋转0度
                  .then((rotatedBase64) => {
                    that.photoUrl = rotatedBase64;
                  });
               } else {
                 that.showBtn = false;
                 mui.confirm("未获取到图形", "提示", ["返回"], function (e) {
                   if (e.index == 0) {
                        //根据自己逻辑写就行 
                    
                   }
                 });
               }
            });
          },
          rotateBase64Image(base64ImageData, degree) {
            let that = this;
            const blob = that.base64ToBlob(base64ImageData);
            const url = URL.createObjectURL(blob);
            return new Promise((resolve, reject) => {
              const img = new Image();
              img.src = url;
              img.onload = () => {
                const canvas = document.createElement("canvas");
                const ctx = canvas.getContext("2d");
                // 计算旋转后的尺寸
                const maxDim = Math.max(img.width, img.height);
                canvas.width = maxDim;
                canvas.height = maxDim;
                // 将图片绘制到canvas上，并旋转指定的角度
                ctx.translate(maxDim / 2, maxDim / 2);
                ctx.rotate((degree * Math.PI) / 180);
                ctx.drawImage(
                  img,
                  -img.width / 2,
                  -img.height / 2,
                  img.width,
                  img.height
                );

                // 将旋转后的canvas转换回Base64编码的图片数据
                const rotatedBase64 = canvas.toDataURL("image/png");
                const srcData = that.base64ToBlob(rotatedBase64);
                resolve(URL.createObjectURL(srcData));
              };
              img.onerror = () => {
                that.showBtn = false;
                mui.confirm("自己随便提示吧异常", "提示", ["返回"], function (e) {
                  if (e.index == 0) {
                    //自己执行你想要的操作
                  }
                });
              };
            });
          },
        },
        mounted() {
          this.degree = 0;  
          this.getPhoto();
        },
      });
</script>
// 单独把双指放大缩小之类的引入 我用的jq 你可以直接用js获取
<script type="text/javascript">
      $(function () {
        $("div.pinch-zoom").each(function () {
          new RTP.PinchZoom($(this), {});
        });
      });
</script>

还需要引入缩放这个：具体文件需要的自提：

通过网盘分享的文件：pinchzoom.js
链接: https://pan.baidu.com/s/1p83enqDMmrNOHyH8W4gUtQ?pwd=ies7 提取码: ies7

  <script
      type="text/javascript"
      src="../../../common/js/pinchzoom.js"
    ></script>

css 样式：

.headImage {
      margin-top: 1rem;
      margin-right: 0.5rem;
      margin-bottom: 1rem;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      height: 3.8rem;
    }

    .headImage > div {
      width: 3.8rem;
      height: 3.8rem;
      border-radius: 0.6rem;
      margin: 0.4rem;
      background-color: #e8eff1;
      line-height: 2rem;
      text-align: center;
    }
    .page img {
      width: 100%;
      height: auto;
    }
    .page {
      height: 100%;
      width: 100%;
    }
// 这块比较重要 不设置的话 默认会根据你的宽或者高 生成一个正方形区域
    .pinch-zoom {
      height: 95% !important;
      width: 100% !important;
    }
    .page > div {
      height: 100% !important;
      width: 100% !important;
    }
    .leftPhoto,
    .rightPhoto,
    .comeBack {
      display: flex;
      align-items: center;
      justify-content: center;
    }