微信小程序图片选择区域裁剪实现方法

1. 前言

微信小程序开发已经得到众多开发者的关注和喜爱，并且在中国已经成为了一种非常流行的移动应用开发方式。在这篇文章中，我们将会介绍如何通过微信小程序的API来实现图片选择区域裁剪的功能。希望本文能对想要开发微信小程序的开发者有所帮助。

2. 图片选择和裁剪功能实现

2.1. 图片选择功能实现步骤

要实现图片选择功能，我们需要使用小程序的wx.chooseImage() API，它允许用户从手机相册或者拍照中选择图片。下面是实现步骤：

步骤一： 在wxml中创建一个button标签，并为该标签绑定一个点击事件，代码如下：

<button bindtap="chooseImage">选择图片</button>

步骤二： 在js文件中实现选择图片的事件处理函数chooseImage()，代码如下：

Page({

  data: {
    imageSrc: ""
  },
  chooseImage: function() {
    var that = this;
    wx.chooseImage({
      count: 1,
      sizeType: ["original", "compressed"],
      sourceType: ["album", "camera"],
      success: function(res) {
        that.setData({
          imageSrc: res.tempFilePaths[0]
        })
      }
    })
  }
})

说明： 在chooseImage()函数中，我们使用了wx.chooseImage()API来弹出图片选择框，其中count为最多可选择的图片数量，sizeType为所选图片的尺寸类型，sourceType为图片的来源类型。如果用户选择了图片，那么图片的本地文件路径将被存储在res.tempFilePaths数组中，我们可以通过setData()函数将其设置为data.imageSrc的值，以便后续使用。

2.2. 图片裁剪功能实现步骤

要实现图片裁剪功能，我们需要使用小程序的wx.previewImage()和wx.getImageInfo() API 以及canvas绘图方式。下面是实现步骤：

步骤一： 在wxml中创建一个image标签，并为该标签绑定一个点击事件，代码如下：

<image bindtap="previewImage" src="{{imageSrc}}" mode="aspectFill"/>

步骤二： 在js文件中实现预览图片的事件处理函数previewImage()，代码如下：

Page({

  data: {
    imageSrc: ""
  },
  previewImage: function() {
    var that = this;
    wx.previewImage({
      current: that.data.imageSrc,
      urls: [that.data.imageSrc],
      success: function(res) {
        wx.getImageInfo({
          src: that.data.imageSrc,
          success: function(res) {
            var scale = 2;
            var canvasWidth = res.width
            var canvasHeight = res.height;
            while (canvasWidth > 1000 || canvasHeight > 1000) {
              canvasWidth = Math.round(res.width / scale)
              canvasHeight = Math.round(res.height / scale)
              scale++;
            }
            that.setData({
              canvasWidth: canvasWidth,
              canvasHeight: canvasHeight
            })
            wx.navigateTo({
              url: "../canvas/canvas?imageSrc=" + that.data.imageSrc + "&canvasWidth=" + canvasWidth + "&canvasHeight=" + canvasHeight
            })
          }
        })
      }
    })
  },
})

说明： 在previewImage()函数中，我们使用了wx.previewImage()API来预览画面，并获取图片的信息。如果用户点击了预览画面的确定按钮，那么我们会获取图片的本地文件路径，并使用wx.getImageInfo()API来获取图片的宽度和高度信息。我们需要根据图片的大小来自适应调整canvas的大小，并将图片的信息传递给canvas页面，进行图片裁剪。canvas页面的实现方式在下一部分进行详细说明。

3. canvas实现图片裁剪功能

3.1. canvas页面布局

我们需要在项目根目录下的pages文件夹中创建一个canvas文件夹，并在该文件夹下新建canvas.wxml、canvas.js和canvas.wxss文件。canvas.wxml的布局如下图所示：

<view class="container">

  <canvas canvas-id="cropperCanvas" class="cropper-canvas" style="width: {{canvasWidth}}px; height: {{canvasHeight}}px;" />
  <view class="button-group">
    <button bindtap="getCropperImage">裁剪并保存</button>
    <button bindtap="goBack">返回</button>
  </view>
</view>

其中，canvas标签用于绘制图片，button标签用于触发裁剪事件，goBack()是返回按钮的事件处理函数。

3.2. canvas页面实现

我们需要在canvas.js文件中对canvas页面进行实现，具体实现步骤如下：

步骤一： 获取应用实例和裁剪所需参数

var app = getApp();

var imageSrc = "", canvasWidth = "", canvasHeight = "";
Page({
  onReady: function() {
    var that = this;
    imageSrc = app.globalData.imageSrc;
    canvasWidth = app.globalData.canvasWidth;
    canvasHeight = app.globalData.canvasHeight;
    wx.getImageInfo({
      src: imageSrc,
      success: function(res) {
        var imageWidth = res.width;
        var imageHeight = res.height;
        var canvasId = "cropperCanvas";
        var cropperWidth = canvasWidth - 20;
        var cropperHeight = canvasHeight - 110;
        var cropperLeft = (canvasWidth - cropperWidth) / 2;
        var cropperTop = (canvasHeight - cropperHeight) / 2;
        var imageLeft = 0, imageTop = 0;
        if (cropperWidth / cropperHeight > imageWidth / imageHeight) {
          var imageRealHeight = cropperWidth * imageHeight / imageWidth;
          imageTop = (cropperHeight - imageRealHeight) / 2;
        } else {
          var imageRealWidth = cropperHeight * imageWidth / imageHeight;
          imageLeft = (cropperWidth - imageRealWidth) / 2;
        }
        that.setData({
          imageWidth: imageWidth,
          imageHeight: imageHeight,
          canvasWidth: canvasWidth,
          canvasHeight: canvasHeight,
          canvasId: canvasId,
          cropperLeft: cropperLeft,
          cropperTop: cropperTop,
          cropperWidth: cropperWidth,
          cropperHeight: cropperHeight,
          imageSrc: imageSrc,
          imageLeft: imageLeft,
          imageTop: imageTop,
        })
        that.drawCropperCanvas();
      }
    })
  }
})

说明： 上面代码中，我们获取了应用的实例、图片路径和裁剪所需参数，并通过wx.getImageInfo()API获取了图片的详细信息。接下来，我们需要根据图片的大小自适应调整canvas的大小，并根据canvas和图片的大小计算裁剪框和图片的位置信息，代码中的drawCropperCanvas()函数用于初始化canvas

步骤二： 初始化canvas

drawCropperCanvas: function() {

    var that = this;
    var cropperWidth = that.data.cropperWidth;
    var cropperHeight = that.data.cropperHeight;
    var imageWidth = that.data.imageWidth;
    var imageHeight = that.data.imageHeight;
    var imageLeft = that.data.imageLeft;
    var imageTop = that.data.imageTop;
    var canvasContext = wx.createCanvasContext(that.data.canvasId, that);
    canvasContext.drawImage(imageSrc, imageLeft, imageTop, cropperWidth, cropperHeight, that.data.cropperLeft, that.data.cropperTop, cropperWidth, cropperHeight);
    canvasContext.draw();
  }

说明： 在drawCropperCanvas()函数中，我们通过wx.createCanvasContext() API创建了canvas的上下文环境，并使用drawImage()API在canvas中绘制了图片和裁剪框。

步骤三： 实现图片裁剪操作

我们需要为保存按钮的事件处理函数getCropperImage()编写图片裁剪的操作逻辑，具体步骤如下：

getCropperImage: function() {

    var that = this;
    wx.canvasToTempFilePath({
      canvasId: that.data.canvasId,
      success: function(res) {
        that.setData({
          cropperedImgUrl: res.tempFilePath
        })
        wx.saveImageToPhotosAlbum({
          filePath: that.data.cropperedImgUrl,
          success: function(res) {
            wx.showToast({
              title: "保存成功！",
              icon: "success",
              duration: 2000
            })
          },
          fail: function(res) {
            wx.showModal({
              title: '提示',
              content: '保存失败，请稍后重试',
              showCancel: false
            })
          }
        })
      },
      fail: function(res) {
        wx.showModal({
          title: '提示',
          content: '裁剪失败，请稍后重试',
          showCancel: false
        })
      }
    })
  }

说明： 在该函数中，我们首先调用wx.canvasToTempFilePath()API将canvas裁剪后的图片保存到临时文件路径中，然后使用wx.saveImageToPhotosAlbum()API将裁剪后的图片存储到手机相册中。

4. 总结

本文介绍了如何通过微信小程序API来实现图片选择和裁剪功能，包括了图片选择功能和图片裁剪功能的实现步骤。希望可以帮助想要开发微信小程序的开发者们更好地了解和应用API。如果有任何疑问，欢迎在评论区中留言，小编会及时回复大家的问题。