100vh看这里!微信小程序实现多图片旋转、放大、缩小

微信小程序可以实现多张图片的旋转、放大和缩小。

要创建贴吧功能，就实现了原来使用的腾讯AI界面，最近没有调用界面，重新寻找技术，参考互联网上提供的代码修改了一些效果和代码，最终实现了上传多张照片、旋转等功能。

配合我的上一篇文章，可以实现更多的效果，喜欢的可以收藏关注一下，效果图如下：

代码如下：

let index = 0,items = [],flag = true,itemId = 1;
const hCw = 1.62; // 图片宽高比
const canvasPre = 1; // 展示的canvas占mask的百分比
const maskCanvas = wx.createCanvasContext('maskCanvas');
Page({
  /**
   * 页面的初始数据
   */
  data: {
    itemList: [],
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    items = ;
     = 0
    // ({
    //   url: '/image;
    // });
    // ({
    //   url: '/image;
    // });
    wx.getSystemInfo({
      success: sysData => {
         = sysData
        ({
          canvasWidth: .windowWidth * canvasPre, // 如果觉得不清晰的话，可以把所有组件、宽高放大一倍
          canvasHeight: .windowWidth * canvasPre * hCw,
        })
      }
    })
  },
  addImage(e){
    let that = this;
    wx.chooseImage({
      count: 3, //选择照片的数量
      sizeType: ['original'],
      sourceType: ['album', 'camera'],
      success(res) {
        const tempFilePaths = res.tempFilePaths
        let posHeight = 200,posLeft = 200;
        res.(function(item, index){
          let imgData = {
            url: item,
            top:index * posHeight,
            left: ((index+1) % 2 === 0 ? 200 : 0)
          }
          (imgData);  
        })
      },
      complete(){
        
      },
      fail(){
        wx.hideLoading()
      }
    })
  },
  setDropItem(imgData) {
    let data = {}
    wx.getImageInfo({
      src: imgDa,
      success: res => {
        // 初始化数据
        da = 150; //宽度
        da =150; //高度
        data.image = imgDa; //地址
        da = ++itemId; //id
        da = imgDa; //top定位
        da = imgDa; //left定位
        //圆心坐标
        da = da + da / 2;
        da = da + da / 2;
        da = 1; //scale缩放
        da = 1; //方向缩放
        da = 1; //旋转角度
        da = false; //选中状态
        con(data)
        items[i] = data;
        ({
          itemList: items
        })
      }
    })
  },
  WraptouchStart: function(e) {
    for (let i = 0; i < i; i++) {
      items[i].active = false;
      if  == items[i].id) {
        index = i;
        items[index].active = true;
      }
    }
    ({
      itemList: items
    })

    items[index].lx = e.touches[0].clientX;
    items[index].ly = e.touches[0].clientY;

    con(items[index])
  },
  WraptouchMove(e) {
    if (flag) {
      flag = false;
      setTimeout(() => {
        flag = true;
      }, 100)
    }
    // con('WraptouchMove', e)
    items[index]._lx = e.touches[0].clientX;
    items[index]._ly = e.touches[0].clientY;

    items[index].left += items[index]._lx - items[index].lx;
    items[index].top += items[index]._ly - items[index].ly;
    items[index].x += items[index]._lx - items[index].lx;
    items[index].y += items[index]._ly - items[index].ly;

    items[index].lx = e.touches[0].clientX;
    items[index].ly = e.touches[0].clientY;
    con(items)
    ({
      itemList: items
    })
  },
  WraptouchEnd() {
    ()
  },
  oTouchStart(e) {
    //找到点击的那个图片对象，并记录
    for (let i = 0; i < i; i++) {
      items[i].active = false;
      if  == items[i].id) {
        con('e.curren;, e.curren)
        index = i;
        items[index].active = true;
      }
    }
    //获取作为移动前角度的坐标
    items[index].tx = e.touches[0].clientX;
    items[index].ty = e.touches[0].clientY;
    //移动前的角度
    items[index].anglePre = (items[index].x, items[index].y, items[index].tx, items[index].ty)
    //获取图片半径
    items[index].r = (items[index].x, items[index].y, items[index].left, items[index].top);
    con(items[index])
  },
  oTouchMove: function(e) {
    if (flag) {
      flag = false;
      setTimeout(() => {
        flag = true;
      }, 100)
    }
    //记录移动后的位置
    items[index]._tx = e.touches[0].clientX;
    items[index]._ty = e.touches[0].clientY;
    //移动的点到圆心的距离
    items[index].disPtoO = (items[index].x, items[index].y, items[index]._tx, items[index]._ty - 10)

    items[index].scale = items[index].disPtoO / items[index].r;
    items[index].oScale = 1 / items[index].scale;

    //移动后位置的角度
    items[index].angleNext = (items[index].x, items[index].y, items[index]._tx, items[index]._ty)
    //角度差
    items[index].new_rotate = items[index].angleNext - items[index].anglePre;

    //叠加的角度差
    items[index].rotate += items[index].new_rotate;
    items[index].angle = items[index].rotate; //赋值

    //用过移动后的坐标赋值为移动前坐标
    items[index].tx = e.touches[0].clientX;
    items[index].ty = e.touches[0].clientY;
    items[index].anglePre = (items[index].x, items[index].y, items[index].tx, items[index].ty)

    //赋值setData渲染
    ({
      itemList: items
    })

  },
  getDistancs(cx, cy, pointer_x, pointer_y) {
    var ox = pointer_x - cx;
    var oy = pointer_y - cy;
    return Ma(
      ox * ox + oy * oy
    );
  },
  /*
   *参数1和2为图片圆心坐标
   *参数3和4为手点击的坐标
   *返回值为手点击的坐标到圆心的角度
   */
  countDeg: function(cx, cy, pointer_x, pointer_y) {
    var ox = pointer_x - cx;
    var oy = pointer_y - cy;
    var to = Ma(ox / oy);
    var angle = Ma(to) / (2 * Ma) * 360;
    // con("ox.oy:", ox, oy)
    if (ox < 0 && oy < 0) //相对在左上角，第四象限，js中坐标系是从左上角开始的，这里的象限是正常坐标系  
    {
      angle = -angle;
    } else if (ox <= 0 && oy >= 0) //左下角,3象限  
    {
      angle = -(180 - angle)
    } else if (ox > 0 && oy < 0) //右上角，1象限  
    {
      angle = angle;
    } else if (ox > 0 && oy > 0) //右下角，2象限  
    {
      angle = 180 - angle;
    }
    return angle;
  },
  deleteItem: function(e) {
    let newList = [];
    for (let i = 0; i < i; i++) {
      if  != items[i].id) {
        newLi(items[i])
      }
    }
    if  > 0) {
      newList[newLi - 1].active = true;
    }
    items = newList;
    ({
      itemList: items
    })
  },
  openMask () {
    if ( == 0) {
      ()
    }
    ({
      showCanvas: true
    })
  },
  synthesis() { // 合成图片
     =  + 1
    con('合成图片')
    ma();
    ma();
    //一张白图  可以不画
    ma('#fff');
    ma(0, 0, .windowWidth, )
    ma();
    ma();

    //画背景 hCw 为 1.62 背景图的高宽比
    ma('/image;, 0, 0, , );
    /*
        num为canvas内背景图占canvas的百分比，若全背景num =1
        prop值为canvas内背景的宽度与可移动区域的宽度的比，如一致，则prop =1;
       */
    //画组件
    const num = 1,
      prop = 1;
    i((currentValue, index) => {
      ma();
      ma( * (1 - num) / 2, 0);
      ma();
      ma * prop, curren * prop); //圆心坐标
      ma * Ma / 180);
      ma(- * curren * prop / 2), - * curren * prop / 2))
      ma(currentValue.image, 0, 0, curren * curren * prop, curren * curren * prop);
      ma();
    })
    ma(false, (e) => {
      wx.canvasToTempFilePath({
        canvasId: 'maskCanvas',
        success: res => {
          con('draw success')
          con)
          ({
            canvasTemImg: res.tempFilePath
          })
        }
      }, this)
    })
  },
  disappearCanvas() {
    ({
      showCanvas: false
    })
  },
  saveImg: function() {
    wx.saveImageToPhotosAlbum({
      filePath: ,
      success: res => {
        wx.showToast({
          title: '保存成功',
          icon: "success"
        })
      },
      fail: res => {
        con(res)
        wx.openSetting({
          success: settingdata => {
            con(settingdata)
            if [';]) {
              con('获取权限成功，给出再次点击图片保存到相册的提示。')
            } else {
              con('获取权限失败，给出不给权限就无法正常使用的提示')
            }
          },
          fail: error => {
            con(error)
          }
        })
        wx.showModal({
          title: '提示',
          content: '保存失败，请确保相册权限已打开',
        })
      }
    })
  }
})

/**index.wxss**/
.bg {
  width: 100%;
  height: 100vh;
}
.contentWarp{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  /* background-color: #d1e3f1; */
}
.touchWrap{
    transform-origin: center;
    position: absolute;
    z-index: 100;
}

.imgWrap {
    box-sizing: border-box;
    width: 100%;
    transform-origin: center;
    float: left;
    border: 5rpx transparent dashed;
}
.imgWrap image {
    float: left;
}
.touchActive .x {
    display: block;
}

.touchActive .o {
    display: block;
}

.x {
    position: absolute;
    top: -25rpx;
    left: -25rpx;
    z-index: 500;
    display: none;
    width: 50rpx;
    height: 50rpx;
    overflow: hidden;
    font-weight: bold;
    color: #d1e3f1;
}
.o {
    position: absolute;
    bottom: -25rpx;
    right: -25rpx;
    width: 50rpx;
    height: 50rpx;
    text-align: center;
    display: none;
    overflow: hidden;
    font-weight: bold;
    color: #d1e3f1;
}
.active {
    background-color: rgb(78, 114, 151);
}

.active view {
    border: none;
}
.touchActive {
    /* border: 4rpx #fff dashed; */
    z-index: 400;
}
.fixed {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}


.canvasWrap {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 999;
    text-align: center;
}

.maskCanvas {
    position: absolute;
    left: -200%;
    top: 0;
}

.btn {
    font-size: 30rpx;
    color: #81b7c4;
    border: 3rpx solid #81b7c4;
    background-color: #fff;
    line-height: 90rpx;
    width: 50%;
    margin-top: 20rpx;
    height: 90rpx;
}

.btnView view {
    padding-bottom: 20rpx;
}

.hand {
    position: absolute;
    left: 100rpx;
    right: 0;
    margin: auto;
    z-index: 100;
}

.getUserInfoBtn {
    position: initial;
    border: none;
    background-color: none;
}

.getUserInfoBtn::after {
    border: none;
}

.btn_view {
    display: flex;
    padding: 20rpx;
}

.btn_view button {
    width: 300rpx;
    font-size: 30rpx;
    color: #81b7c4;
    border: 3rpx solid #81b7c4;
    background-color: #fff;
    line-height: 90rpx;
}

.resImg {
  width: 75%;
  margin-top: 10px;
}

<view class="container">
  <image class="bg" src="/image;></image>
  <view class='contentWarp'>
    <!-- *************操作区域*************  -->
    <block wx:for="{{itemList}}" wx:key="{{i}}">

      <view class='touchWrap' style='transform: scale({{i}});top:{{i}}px;left:{{i}}px; z-index:{{i}}'>
        <view class='imgWrap {{i "touchActive":""}}' style="transform: rotate({{i}}deg); border: {{i4*i}}rpx #fff dashed;">
          <image src='{{item.image}}' data-id='{{i}}' style='width:{{i}}px;height:{{i}}px;' bindtouchstart='WraptouchStart' bindtouchmove='WraptouchMove' bindtouchend='WraptouchEnd'></image>
          <image class='x' src='../../image; style='transform: scale({{i}});transform-origin:center;' data-id='{{i}}' bindtap='deleteItem'></image>
          <image class='o' src='../../image; style='transform: scale({{i}});transform-origin:center;' data-id='{{i}}' bindtouchstart='oTouchStart' bindtouchmove='oTouchMove' bindtouchend='WraptouchEnd'></image>
        </view>
      </view>
    </block>
  </view>
  <!-- **************操作区域************  -->
  <view class="fixed" style="margin-bottom:20px">
    <button bindtap="addImage" style="width:45%;heigth:45px;float:left;margin-left:15px">选择照片</button>
    <button class="custom-button" bindtap="openMask" type="primary" style="width:45%;heigth:45px;margin-top:0">预览照片</button>
  </view>

  <view class='canvasWrap' hidden="{{!showCanvas}}">
    <image class="resImg" bindlongtap="saveImg" src="{{canvasTemImg}}" mode="widthFix"></image>
    <view class='btn_view'>
      <button bindtap='saveImg'>保存到手机</button>
      <button bindtap='disappearCanvas'>关闭</button>
    </view>
  </view>

  <!-- bug点：一定不要用if hidden 隐藏canvas会导致很多api调用bug -->
  <canvas class='maskCanvas' canvas-id="maskCanvas" style='width:{{canvasWidth}}px; height:{{canvasHeight}}px;'></canvas>
  
</view>

1.《100vh看这里!微信小程序实现多图片旋转、放大、缩小》援引自互联网，旨在传递更多网络信息知识，仅代表作者本人观点，与本网站无关，侵删请联系页脚下方联系方式。

2.《100vh看这里!微信小程序实现多图片旋转、放大、缩小》仅供读者参考，本网站未对该内容进行证实，对其原创性、真实性、完整性、及时性不作任何保证。

3.文章转载时请保留本站内容来源地址，https://www.lu-xu.com/guonei/1959155.html

100vh看这里!微信小程序实现多图片旋转、放大、缩小

100克食物重量参照图专题之500大卡热量相当于多少食物？有“负卡路里食物”，能越吃越瘦？

英国演员肖恩·康纳利去世曾主演007系列电影

关于100vh我想说2 行 JS 代码实现页面横向滚动特效

100vh，干货看这篇!用了很多动效，介绍 4个很 Nice 的 Veu 路由过渡动效

【100vh】基于Ganos百行代码实现亿级矢量空间数据在线可视化

100vh，干货看这篇!不凡的低调生活家｜豪爵VH125测评

【100vh】专题不凡的低调生活家｜豪爵VH125测评

100vh看这里!百元出头还有灯吃鸡够用了雷柏VH100S游戏耳机体验

关于100vh我想说百元出头还有灯吃鸡够用了雷柏VH100S游戏耳机体验

100vh，干货看这篇!承接上篇这里谈V(VW/VH/VM)单位的使用场景

100vh看这里!微信小程序实现多图片旋转、放大、缩小

100克食物重量参照图专题之500大卡热量相当于多少食物？有“负卡路里食物”，能越吃越瘦？

英国演员肖恩·康纳利去世 曾主演007系列电影

英国演员肖恩·康纳利去世曾主演007系列电影