微信小程序实现图片拖动、放大、缩小、旋转、滤镜和切图功能

谁践踏了优雅 2023-07-19 08:15 37阅读 0赞

**目录**

前言

实现过程

--------------------

### 前言 ###

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

最终效果：

![20200330140258260.gif][]

### 实现过程 ###

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][https_jingyan.baidu.com_article_ed15cb1b9fd9bb1be3698183.html]查看），根据设置的滤镜值，进行不同的滤镜处理；而调用形状方法util.imgShapes，根据设置的形状值，进行不同的切图效果；

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

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

查看公众号信息：

![20200330171039982.jpg][]

[20200330140258260.gif]: /images/20230528/67993d97132e4c3bb6a5ef5659d08e55.png
[https_jingyan.baidu.com_article_ed15cb1b9fd9bb1be3698183.html]: https://jingyan.baidu.com/article/ed15cb1b9fd9bb1be3698183.html
[20200330171039982.jpg]: /images/20230528/3367bd64e6a74ff09a673a8db4235575.png