微信小程序实现图片压缩功能

微信小程序中的图片压缩功能详解

随着微信小程序的普及，越来越多的开发者开始其功能的。其中，图片压缩功能对于优化用户体验和提高程序性能至关重要。本文将详细介绍微信小程序如何实现图片压缩功能，并附带实用的代码示例。

一、微信拍照API简介

在微信小程序中，我们可以使用wx.chooseImage API来选择图片。该API提供了多种参数设置，包括选择图片的数量、大小和来源等。仅仅通过这些参数并不能实现图片压缩功能。

二、图片压缩的坑

在微信小程序中，拍照得到的图片默认是不进行压缩的。尤其在iOS和安卓系统中，二者的表现有所不同。安卓系统的图片大小可能会比较大，而iOS系统则会对图片进行一定程度的压缩。为了实现统一的图片压缩效果，我们需要采取额外的措施。

三、解决方案

针对上述问题，我们可以通过canvas来实现图片的压缩。具体步骤如下：

1. 使用wx.chooseImage API选择图片。

2. 判断当前设备的机型，如果是iOS设备，则直接进行上传；如果是安卓设备，则通过canvas进行图片压缩。

3. 使用wx.canvasToTempFilePath API将canvas内容导出为图片，并上传到服务器。

四、代码示例

以下是实现上述功能的代码示例：

```javascript

// 点击拍照

takePictures: function() {

var that = this;

wx.chooseImage({

count: 1, // 默认选择1张图片

sizeType: ['pressed'], // 选择压缩图

sourceType: ['camera'], // 从相机选择图片

success: function(res) {

var tempFilePaths = res.tempFilePaths; // 获取图片的本地文件路径列表

that.setData({

attendSuccessImg: tempFilePaths[0] // 将图片路径保存到数据模型中

});

// 判断机型，进行图片处理

var model = "";

wx.getSystemInfo({

success: function(res) {

model = res.model; // 获取设备模型信息

}

});

if (modeldexOf("iPhone") <= 0) { // 如果是安卓设备，进行canvas压缩处理

drawCanvas(); // 调用canvas绘制函数进行图片压缩处理