小程序中的图片压缩与上传

在小程序开发中，图片的使用是非常常见的，然而，过大的图片不仅占用存储空间，还会导致页面加载缓慢，影响用户体验。因此，在小程序中对图片进行压缩和上传是一个重要的优化点。本文将介绍如何在小程序中进行图片压缩与上传的处理。

图片压缩

小程序提供了canvas组件和canvasContext对象，可以通过这些API对图片进行压缩处理。

下面是一个简单的示例，展示了如何使用canvas组件对图片进行压缩：

// 页面的 wxml 文件

<canvas id="myCanvas" canvas-id="myCanvas"></canvas>
<button bindtap="compressImage">压缩图片</button>


// 页面的 js 文件

Page({
  compressImage() {
    wx.chooseImage({
      success(res) {
        const tempFilePath = res.tempFilePaths[0];
        const ctx = wx.createCanvasContext('myCanvas');
        
        wx.getImageInfo({
          src: tempFilePath,
          success(info) {
            const { width, height } = info;

            // 设置 canvas 的宽高为原始图片的宽高
            ctx.canvas.width = width;
            ctx.canvas.height = height;
            
            ctx.drawImage(tempFilePath, 0, 0, width, height);
            
            ctx.draw(false, () => {
              wx.canvasToTempFilePath({
                canvasId: 'myCanvas',
                success(res) {
                  const compressedFilePath = res.tempFilePath;
                  // TODO: 在这里可以将压缩后的图片进行其他操作，比如上传等
                  console.log(compressedFilePath);
                },
                fail(error) {
                  console.error(error);
                }
              })
            });
          },
          fail(error) {
            console.error(error);
          }
        })
      },
      fail(error) {
        console.error(error);
      }
    })
  }
})

在上述代码中，首先使用wx.chooseImage从相册中选择了一张图片，然后通过wx.getImageInfo获取到图片的宽高信息，接着使用wx.createCanvasContext创建了一个canvas上下文对象，并将原始图片绘制到该canvas上下文中。最后，使用wx.canvasToTempFilePath将canvas中的内容导出为一张压缩后的临时文件。

图片上传

在小程序中，可以使用wx.uploadFile进行图片的上传操作。下面是一个示例：

wx.chooseImage({
  success(res) {
    const tempFilePath = res.tempFilePaths[0];

    wx.uploadFile({
      url: 'https://api.example.com/upload',
      filePath: tempFilePath,
      name: 'file',
      success(res) {
        const data = res.data;
        // TODO: 在这里可以处理上传后的结果
        console.log(data);
      },
      fail(error) {
        console.error(error);
      }
    })
  },
  fail(error) {
    console.error(error);
  }
})

上述代码中，使用wx.chooseImage选择了一张图片，然后使用wx.uploadFile进行上传。wx.uploadFile的url参数指定了上传的接口地址，filePath参数指定了需要上传的文件路径，name参数指定了在服务器端接收文件的参数名称。

需要注意的是，图片上传可能需要进行身份验证或者携带其他参数，可以根据具体的业务逻辑进行处理。

小结

通过对图片进行压缩和上传操作，可以优化小程序的页面加载速度和用户体验。本文介绍了如何使用canvas组件对图片进行压缩，以及使用wx.uploadFile进行图片的上传操作。在实际开发中，还可以根据需求对压缩后的图片进行其他处理，比如添加水印、裁剪等。

本文来自极简博客，作者：星辰守望者，转载请注明原文链接：小程序中的图片压缩与上传