微信小程序图片裁剪指南：妙用We-Cropper，裁出最美回忆

2023-10-13 08:11:56

在微信小程序开发中，图片裁剪是一个常见的功能。它可以让用户自定义裁剪图片的大小和形状，以便更好地适应不同场景的需求。在本文中，我们将为大家介绍如何使用We-Cropper来实现图片裁剪功能。

We-Cropper是一个开源的微信小程序图片裁剪组件，它提供了丰富的API和完善的文档，可以帮助开发者快速、轻松地实现图片裁剪功能。接下来，我们将分步讲解如何使用We-Cropper来裁剪图片。

1. 引入We-Cropper

首先，我们需要在微信小程序中引入We-Cropper。我们可以通过以下步骤来实现：

在项目根目录下创建一个名为pages的文件夹，并在其中创建一个名为cropper的文件夹。
在cropper文件夹中创建一个名为cropper.js的文件，并在其中写入以下代码：

import WeCropper from '../../components/we-cropper/we-cropper.js'

const device = wx.getSystemInfoSync()
const width = device.windowWidth
const height = device.windowHeight - 50

Page({
  data: {
    cropperOpt: {
      id: 'cropper',
      width,
      height,
      scale: 2.5,
      zoom: 8,
      cut: {
        x: (width - 300) / 2,
        y: (height - 300) / 2,
        width: 300,
        height: 300
      }
    }
  },
  touchStart (e) {
    this.wecropper.touchStart(e)
  },
  touchMove (e) {
    this.wecropper.touchMove(e)
  },
  touchEnd (e) {
    this.wecropper.touchEnd(e)
  },
  getCropperImage () {
    this.wecropper.getCropperImage((src) => {
      //裁剪后的图片路径
      console.log(src)
    })
  },
  uploadTap () {
    const that = this

    wx.chooseImage({
      count: 1, // 默认9
      sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success (res) {
        const src = res.tempFilePaths[0]
        //  获取裁剪图片资源后，给data添加src属性即可
        that.wecropper.pushOrign(src)
      }
    })
  }
})

在pages.json文件中添加以下代码：

{
  "pages": [
    {
      "path": "pages/cropper/cropper",
      "style": {
        "navigationBarTitleText": "图片裁剪"
      }
    }
  ]
}

在项目根目录下创建一个名为components的文件夹，并在其中创建一个名为we-cropper的文件夹。
将We-Cropper的代码复制到components/we-cropper文件夹中。

2. 使用We-Cropper

在引入We-Cropper之后，我们就可以在小程序中使用它了。我们可以通过以下步骤来实现：

在cropper.js文件中，定义一个名为cropperOpt的数据对象，并将其传递给WeCropper组件。
在cropper.js文件中，定义touchStart、touchMove和touchEnd三个方法，并将其绑定到We-Cropper组件的相应事件。
在cropper.js文件中，定义一个名为getCropperImage的方法，并将其绑定到We-Cropper组件的getCropperImage事件。
在cropper.js文件中，定义一个名为uploadTap的方法，并将其绑定到一个按钮的点击事件。
在cropper.js文件中，在uploadTap方法中调用wx.chooseImage方法，以选择一张图片。
在cropper.js文件中，在uploadTap方法中，将选择的图片路径传递给We-Cropper组件的pushOrign方法。