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

效果图：

旋转

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

代码实现：

html

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代码

html 复制代码

<script type="text/javascript">
      let vm = new Vue({
        el: "#home",
        data() {
          return {
            graphPhoto: "", //图片地址
            showBtn: false, //判断是否显示按钮
          };
        },
       methods: {
          // 返回
          comeBack() {
            // 根据逻辑返回就行
          },
          leftPhoto() {
            // 使用示例
            this.rotateBase64Image(this.graphPhoto, 90) // 旋转90度
              .then((rotatedBase64) => {
                this.graphPhoto = rotatedBase64;
              });
          },
          rightPhoto() {
            this.rotateBase64Image(this.graphPhoto, -90) // 旋转90度
              .then((rotatedBase64) => {
                this.graphPhoto = rotatedBase64;
              });
          },
          // 接口查询
          getPhoto() {
            let that = this;
              //.... 你的接口返回的数据 base 如果没有可以暂时用本地的图片代替一下
              if (base) {
                that.graphPhoto = "../../../common/image/WechatIMG624.jpg";
                that.showBtn = true; //是否展示按钮
                that
                  .rotateBase64Image(that.graphPhoto, 0) // 默认调用 旋转0度
                  .then((rotatedBase64) => {
                    that.graphPhoto = rotatedBase64;
                  });
               } else {
                 that.showBtn = false;
                 mui.confirm("未获取到图形", "提示", ["返回"], function (e) {
                   if (e.index == 0) {
                        //根据自己逻辑写就行 
                    
                   }
                 });
               }
            });
          },
          rotateBase64Image(base64ImageData, degree) {
            let that = this;
            return new Promise((resolve, reject) => {
              const img = new Image(); // 创建一个img
              img.onload = () => {
                // 创建一个 canvas
                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");
                resolve(rotatedBase64);
              };
              img.onerror = () => {
                that.showBtn = false;
                mui.confirm("图形解析异常", "提示", ["返回"], function (e) {
                  if (e.index == 0) {
                     //根据自己逻辑写就行 
                  }
                });
              };
              img.src = base64ImageData;
            });
          },
        },
        mounted() {
          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

javascript 复制代码

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

css 样式：

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;
    }