三种图片压缩工具，让小程序轻装上阵

2022-12-11 18:32:08

从图像选择到压缩：小程序图像处理利器

在小程序开发中，图像处理是一个常见的需求。选择合适的图像，并对其进行压缩以优化存储和传输，至关重要。小程序提供了三个强大的 API 来处理这些任务：wx.chooseMedia、wx.canvasToTempFilePath 和 wx.compressImage。

wx.chooseMedia：从相册中选择媒体

wx.chooseMedia API 允许从手机相册中选择多媒体文件。您可以指定选择文件的类型，例如图像、视频或音频。对于需要用户从现有图片库中选择图像的场景，此 API 非常有用。

wx.chooseMedia({
  count: 1, // 最多选择一张图片
  mediaType: ['image'], // 只允许选择图片
  success: function (res) {
    // 选择成功，res.tempFilePath为图片临时路径
  }
});

wx.canvasToTempFilePath：从画布导出图像

wx.canvasToTempFilePath API 用于将小程序中的画布导出为临时图像文件。这对于从自定义画布或图表中导出图像很有用。通过指定 canvasId，您可以将画布内容转换为图像并存储在临时文件中。

wx.canvasToTempFilePath({
  canvasId: 'myCanvas', // 画布 ID
  success: function (res) {
    // 导出成功，res.tempFilePath为图片临时路径
  }
});

wx.compressImage：压缩图像

wx.compressImage API 提供了对现有图像进行压缩的功能。这对于优化图像大小以加快传输或减少存储空间非常有用。您可以通过指定图像源、质量级别和其他参数来控制压缩过程。

wx.compressImage({
  src: 'path/to/image', // 要压缩的图片路径
  quality: 80, // 压缩质量，范围 0~100
  success: function (res) {
    // 压缩成功，res.tempFilePath为压缩后图片临时路径
  }
});

巧妙组合，满足更多需求

通过巧妙地组合这三个 API，小程序开发者可以满足更多元化的图像处理需求。以下是一些示例场景：

从相册中选择图像并对其进行压缩。
从画布中导出图像并将其压缩。
对图像进行裁剪、旋转或缩放。

选择合适的压缩方法

在选择图片压缩方法时，需要考虑以下因素：

图像质量：压缩后的图像质量是否满足需求。
图像大小：压缩后的图像大小是否能够减少到预期大小。
压缩速度：压缩算法的执行效率是否能够满足需求。

总结

wx.chooseMedia、wx.canvasToTempFilePath 和 wx.compressImage 是小程序图像处理中强大的 API。通过理解它们的用法和优势，开发者可以轻松地处理图像，满足不同场景的需求。

常见问题解答

如何使用 wx.compressImage 压缩从相册中选择的图像？

wx.chooseMedia({
  count: 1,
  mediaType: ['image'],
  success: function (res) {
    wx.compressImage({
      src: res.tempFiles[0].path, // 从相册中选择的图片临时路径
      quality: 80,
      success: function (res) {
        // 压缩成功，res.tempFilePath为压缩后图片临时路径
      }
    });
  }
});

如何将画布中的图像压缩并保存为文件？

wx.canvasToTempFilePath({
  canvasId: 'myCanvas',
  success: function (res) {
    wx.compressImage({
      src: res.tempFilePath, // 从画布导出的图片临时路径
      quality: 80,
      success: function (res) {
        // 压缩成功，res.tempFilePath为压缩后图片临时路径
      }
    });
  }
});

wx.compressImage 支持哪些压缩算法？

wx.compressImage 支持 JPEG 和 WEBP 压缩算法。

如何裁剪 wx.chooseMedia 中选择的图像？

裁剪 wx.chooseMedia 中选择的图像需要在图像压缩之前使用 wx.getImageInfo 获取图像信息，然后使用 wx.canvasGetImageData 获取图像像素数据。之后，您可以使用 JavaScript 代码手动裁剪像素数据，然后使用 wx.canvasPutImageData 将其写回画布。最后，使用 wx.canvasToTempFilePath 将裁剪后的画布导出为图像文件。