解密微信小程序图片裁剪功能背后的秘密

2023-05-24 09:04:15

在小程序中裁剪图片：终极指南

引言

图像处理在现代应用程序中至关重要，而小程序也不例外。无论是用于用户头像还是产品图片，裁剪图像的能力都是必不可少的。在这篇全面的指南中，我们将深入探讨如何轻松地实现小程序中的图片裁剪，同时还会创建可视化裁剪控件。

如何手动裁剪图片

第一步是从定义图片组件开始。使用 WXML，我们可以指定图像源以及宽高属性：

<image src="{{imageUrl}}" style="width: {{imageWidth}}px; height: {{imageHeight}}px;" />

在 JavaScript 中，我们为宽高属性设置值：

this.data = {
  imageWidth: 300,
  imageHeight: 300,
};

接下来，使用 wx.getImageInfo() 方法获取图片的原始宽高：

wx.getImageInfo({
  src: imageUrl,
  success: (res) => {
    const originalWidth = res.width;
    const originalHeight = res.height;

    // 计算裁剪区域的宽高
    const cropWidth = originalWidth / 2;
    const cropHeight = originalHeight / 2;

    // 更新 imageWidth 和 imageHeight 属性
    this.setData({
      imageWidth: cropWidth,
      imageHeight: cropHeight,
    });
  },
});

最后，使用 wx.canvasToTempFilePath() 方法将裁剪后的图片保存到临时文件中：

wx.canvasToTempFilePath({
  canvasId: 'canvas',
  success: (res) => {
    // 将裁剪后的图片路径存储到 imageUrl 属性中
    this.setData({
      imageUrl: res.tempFilePath,
    });
  },
});

创建可视化裁剪控件

为了让用户更轻松地裁剪图片，我们可以创建一个可视化裁剪控件。首先，定义一个包含 canvas 组件的容器：

<view>
  <canvas id="canvas" style="width: 300px; height: 300px;" />
</view>

接下来，在 JavaScript 中定义一个控制裁剪区域的变量：

this.data = {
  cropArea: {
    x: 0,
    y: 0,
    width: 100,
    height: 100,
  },
};

然后，使用 wx.drawCanvas() 方法在 canvas 组件上绘制裁剪框：

wx.drawCanvas({
  canvasId: 'canvas',
  actions: [
    {
      type: 'rect',
      x: this.data.cropArea.x,
      y: this.data.cropArea.y,
      width: this.data.cropArea.width,
      height: this.data.cropArea.height,
      strokeStyle: '#ff0000',
      lineWidth: 2,
    },
  ],
});

为了允许用户移动裁剪框，使用 wx.onTouchMove() 方法监听手指移动事件：

wx.onTouchMove(e => {
  // 计算裁剪区域的新位置和大小
  const newX = e.touches[0].clientX - this.data.cropArea.width / 2;
  const newY = e.touches[0].clientY - this.data.cropArea.height / 2;
  const newWidth = e.touches[0].clientX - newX;
  const newHeight = e.touches[0].clientY - newY;

  // 更新 cropArea 变量
  this.setData({
    cropArea: {
      x: newX,
      y: newY,
      width: newWidth,
      height: newHeight,
    },
  });

  // 重新绘制裁剪框
  this.drawCropArea();
});

最后，再次使用 wx.canvasToTempFilePath() 方法将裁剪后的图片保存到临时文件中：

wx.canvasToTempFilePath({
  canvasId: 'canvas',
  success: (res) => {
    // 将裁剪后的图片路径存储到 imageUrl 属性中
    this.setData({
      imageUrl: res.tempFilePath,
    });
  },
});