例簡介

本文介紹使用微信小程序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：把畫布保存到本地相冊。