例简介

本文介绍使用微信小程序API+canvas来实现图片的可拖动、放大、缩小和旋转，并可对选中的图片进行不同效果的滤镜和不同形状的切图，且可对最终效果进行保存到本地。

实现过程

1、文件index.wxml和index.wxss代码如下，这一块比较简单，可自行查看，不做过多分析：

<view class='contentWarp'>
  <block wx:for="{{itemList}}" wx:key="id">
    <view class='touchWrap' style='transform: scale({{item.scale}});top:{{item.top}}px;left:{{item.left}}px; z-index:{{item.active?100:1}}'>
      <view class='imgWrap {{item.active? "touchActive":""}}' style="transform: rotate({{item.angle}}deg); border: {{item.active?4*item.oScale:0}}rpx #fff dashed;">
        <image src='{{item.image}}' data-id='{{item.id}}' style='width:{{item.width}}px;height:{{item.height}}px;' bindtouchstart='WraptouchStart' bindtouchmove='WraptouchMove' bindtouchend='WraptouchEnd'  mode="widthFix"></image>
        <image class='x' src='../../images/del.png' style='transform: scale({{item.oScale}});transform-origin:center;' data-id='{{item.id}}' bindtap='deleteItem'></image>
        <image class='o' src='../../images/scale.png' style='transform: scale({{item.oScale}});transform-origin:center;' data-id='{{item.id}}' bindtouchstart='oTouchStart' bindtouchmove='oTouchMove' bindtouchend='WraptouchEnd'></image>
      </view>
    </view>
  </block>
</view>
<!-- 右下角操作按钮 -->
<view class="operation-buttons">
  <image src="../../images/upload.png" bindtap="uploadImg"></image>
  <image src="../../images/fliters.png" bindtap="toggleFliters"></image>
  <image src="../../images/shapes.png" bindtap="toggleShapes"></image>
  <image src="../../images/synthesis.png" bindtap="openMask"></image>
</view>
<!-- 各种过滤效果 -->
<view class="fliters" hidden="{{!showFliters}}">
  <block wx:for="{{fliters}}" wx:key="id">
    <image data-fliter="{{item.fliter}}" src="{{item.src}}" bindtap="imgEffects"></image>
  </block>
</view>
<!-- 各种形状 -->
<view class="shapes" hidden="{{!showShapes}}">
  <block wx:for="{{shapes}}" wx:key="id">
    <image data-shape="{{item.shape}}" src="{{item.src}}" bindtap="imgEffects"></image>
  </block>
</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>
<!-- 画布 -->
<canvas class='maskCanvas' canvas-id="maskCanvas" style='width:{{canvasWidth}}px; height:{{canvasHeight}}px;'></canvas>

/**index.wxss**/
.contentWarp {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}


.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 {
  z-index: 400;
}


.operation-buttons {
  position: absolute;
  bottom: 100rpx;
  right: 20rpx;
  display: flex;
  flex-direction: column;
  z-index: 101;
}


.operation-buttons image {
  width: 100rpx;
  height: 100rpx;
  margin-top: 40rpx;
}


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


.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: 210rpx;
  font-size: 28rpx;
  background-color: #eb4985;
  color: #fff;
  line-height: 80rpx;
}


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


/* 特效样式 */
.fliters {
  display: flex;
  flex-direction: column;
  position: absolute;
  bottom: 382rpx;
  right: 120rpx;
  z-index: 201;
}


.shapes {
  display: flex;
  flex-direction: column;
  position: absolute;
  bottom: 242rpx;
  right: 120rpx;
  z-index: 201;
}


.fliters image, .shapes image {
  width: 60rpx;
  height: 60rpx;
  border: 2rpx solid #eb4985;
}

2、文件index.js存放所有功能的逻辑代码，相对比较复杂，下面分开来分析几个重点方法：

1）方法uploadImg+setDropItem：获取上传图片的信息，跟设置的最大宽高进行判断（maxWidth, maxHeight），然后根据判断的结果进行缩放，避免大图溢出，且设置图片的地址、坐标、定位和是否选中等信息；用于后面功能使用，支持多图使用；

2）方法WraptouchStart+WraptouchMove：获取图片移动坐标和触发时坐标的差值，加上图片本来的坐标来实现移动效果，注意要把移动坐标赋值给触发时坐标（items[index].lx = e.touches[0].clientX），不然会导致移动有问题；

3）方法oTouchStart+oTouchMove：获取拖动后图片的半径跟触发时图片的半径的比值，再使用scale来实现缩放功能（items[index].disPtoO / items[index].r）；获取触发时的图片角度+拖动后图片的角度，再使用rotate来实现旋转功能（items[index].angle = items[index].rotate）；

4）方法imgEffects：调用滤镜方法util.imgFliters（详细可到https://jingyan.baidu.com/article/ed15cb1b9fd9bb1be3698183.html查看），根据设置的滤镜值，进行不同的滤镜处理；而调用形状方法util.imgShapes，根据设置的形状值，进行不同的切图效果；

5）方法synthesis：用来把所有图片的最终效果合成一个画布，用于保存图片到本地使用；

6）方法saveImg：把画布保存到本地相册。