如何实现微信小程序图片选择区域裁剪

小程序图片选择区域裁剪

微信小程序中提供了丰富的API和组件，可以用于开发各种小程序应用，而其中的图片选择和裁剪功能相对来说比较常用。在日常开发中，我们经常需要对图片进行裁剪，比如用户头像上传时，需要将图片裁剪为正方形，以便更好地展示在页面中。那么，如何在微信小程序中实现图片选择区域裁剪呢？下面将结合具体实例进行详细介绍。

1. 图片选择

在微信小程序中，可以使用chooseImage API来选择图片。调用wx.chooseImage API后，会弹出图片选择界面，让用户选择需要上传的图片，并返回选择的图片的本地文件路径。下面是chooseImage API的示例代码：

wx.chooseImage({
  count: 1,
  sizeType: ['compressed'],
  sourceType: ['album', 'camera'],
  success(res) {
    const tempFilePaths = res.tempFilePaths
  }
})

其中，count 表示一次可以选择的图片的数量。这里设置为1，表示只能选择一张图片。sizeType 表示选择的图片的尺寸压缩方式，这里设置为 ['compressed'] 表示压缩成所选图片的宽度和高度都不超过 1280 的大小。sourceType 表示选择图片的来源，这里设置为 ['album', 'camera']，表示可以从相册或拍照选择图片。调用成功后，可以获取到选择的图片的本地临时文件路径，保存在res.tempFilePaths 中。注意，选择的图片不能超过 10M。

2. 图片预览

在选择图片成功后，为了方便用户确认所选图片是否正确，可以使用 previewImage API 来预览选择的图片。调用 previewImage API 时，需要传入待预览图片的URL列表，和当前显示的图片URL，下面是previewImage API的示例代码：

wx.previewImage({
  urls: [tempFilePaths],
  current: tempFilePaths[0],
})

其中，urls 表示所有要预览的图片的URL列表。这里只有一张图片，因此该列表为数组[tempFilePaths]。current 表示预览时初始显示的图片的URL，这里为选择的第一张图片。

3. 图片裁剪

图片裁剪可以使用微信小程序中提供的canvas组件来实现。在canvas中，可以使用drawImage方法将加载的图片绘制到canvas画布上，然后在画布上使用clip方法裁剪指定区域的图片。最后，可以使用toTempFilePath将裁剪后的图片保存在本地文件系统中。下面是图片裁剪的示例代码：

const ctx = wx.createCanvasContext('myCanvas')
const canvasWidth = 200
const canvasHeight = 200
const scale = 1.25
const cx = (res.windowWidth / scale - canvasWidth) / 2
const cy = (res.windowHeight / scale - canvasHeight) / 2
ctx.drawImage(tempFilePaths[0], cx, cy, canvasWidth, canvasHeight, 0, 0, canvasWidth, canvasHeight)
ctx.draw(false, () => {
  wx.canvasToTempFilePath({
    canvasId: 'myCanvas',
    x: 0,
    y: 0,
    width: canvasWidth,
    height: canvasHeight,
    success(res) {
      console.log(res.tempFilePath)
    }
  })
})

其中，ctx是canvas的绘图上下文，通过调用wx.createCanvasContext('myCanvas')获取。canvasWidth和canvasHeight分别表示绘制区域的宽度和高度。这里设置为 200，表示裁剪成正方形。scale表示裁剪区域相对于手机屏幕大小的缩放比例，这里设置为 1.25。cx和cy表示绘制区域相对于手机屏幕的左上角坐标。使用drawImage方法将选择的图片绘制到canvas上，并裁剪成正方形。使用ctx.draw方法将绘制的图形渲染到canvas画布上。最后，使用wx.canvasToTempFilePath API 将裁剪后的图片保存在本地文件系统中。

4. 完整代码示例

下面是图片选择、预览和裁剪的完整代码示例：

// index.js
Page({
  data: {
    tempFilePaths: []
  },
  chooseImage() {
    wx.chooseImage({
      count: 1,
      sizeType: ['compressed'],
      sourceType: ['album', 'camera'],
      success: res => {
        this.setData({
          tempFilePaths: res.tempFilePaths
        })
      }
    })
  },
  previewImage() {
    wx.previewImage({
      urls: this.data.tempFilePaths,
      current: this.data.tempFilePaths[0],
    })
  },
  clipImage() {
    const res = wx.getSystemInfoSync()
    const ctx = wx.createCanvasContext('myCanvas')
    const canvasWidth = 200
    const canvasHeight = 200
    const scale = 1.25
    const cx = (res.windowWidth / scale - canvasWidth) / 2
    const cy = (res.windowHeight / scale - canvasHeight) / 2
    ctx.drawImage(this.data.tempFilePaths[0], cx, cy, canvasWidth, canvasHeight, 0, 0, canvasWidth, canvasHeight)
    ctx.draw(false, () => {
      wx.canvasToTempFilePath({
        canvasId: 'myCanvas',
        x: 0,
        y: 0,
        width: canvasWidth,
        height: canvasHeight,
        success(res) {
          console.log(res.tempFilePath)
          wx.previewImage({
            urls: [res.tempFilePath],
            current: res.tempFilePath,
          })
        }
      })
    })
  }
})

其中，chooseImage 方法用于选择图片，previewImage 方法用于预览选择的图片，clipImage 方法用于裁剪选择的图片并保存到本地文件系统中。注意，裁剪前需要先调用chooseImage API选择图片。同时，需要在wxml文件中引入canvas组件：<canvas id="myCanvas" style="display: none" />

5. 结语

通过上述示例代码，我们可以轻松地实现微信小程序中的图片选择、预览和裁剪功能。如果需要进行更复杂的图片处理，例如图片滤镜、亮度、对比度等处理，建议开发者了解一下canvas组件的更多API和属性，实现高效、灵活、美观的图片处理效果。