UniApp调用原生相册选择多图的内存优化讲座

大家好，欢迎来到今天的讲座！今天我们要聊一聊如何在 UniApp 中调用原生相册选择多图时进行内存优化。这可是个技术活儿，但别担心，我会尽量用轻松诙谐的语言来解释，让大家都能轻松理解 😊。

1. 为什么需要内存优化？

首先，我们来聊聊为什么要进行内存优化。当你在应用中允许用户从相册中选择多张图片时，尤其是当用户选择了很多高清图片时，内存消耗会急剧增加。如果处理不当，可能会导致应用卡顿、崩溃，甚至手机发热。这对用户体验来说可不是什么好事 🙈。

举个例子：假设用户选择了 10 张 4K 分辨率的图片，每张图片占用 5MB 的内存，那么光是这些图片就会占用 50MB 的内存。再加上其他资源的消耗，内存很快就会爆表。因此，我们需要找到一种方法来优化内存使用，确保应用流畅运行。

2. UniApp 的相册选择 API

在 UniApp 中，我们可以使用 uni.chooseImage API 来调用原生相册选择图片。这个 API 非常强大，支持选择多张图片，并且可以指定图片的质量和大小。下面是一个简单的示例代码：

uni.chooseImage({
  count: 9, // 最多可以选择 9 张图片
  sizeType: ['original', 'compressed'], // 可以选择原图或压缩图
  sourceType: ['album'], // 仅从相册选择
  success: function (res) {
    console.log('选择的图片路径:', res.tempFilePaths);
  }
});

2.1 `sizeType` 参数的重要性

sizeType 参数是内存优化的关键之一。它允许我们在选择图片时指定是选择原图还是压缩图。通常情况下，选择压缩图已经足够满足大多数应用场景了，而且可以大大减少内存占用。

original：选择原图，图片质量高，但内存占用大。
compressed：选择压缩图，图片质量稍低，但内存占用小。

建议大家在大多数情况下使用 compressed，除非你确实需要非常高的图片质量。

2.2 `count` 参数的限制

count 参数决定了用户最多可以选择多少张图片。如果你的应用不需要用户选择大量的图片，建议将 count 设置为一个合理的值（比如 9 张）。这样不仅可以减少内存占用，还可以提升用户体验，避免用户选择过多图片导致操作复杂。

3. 图片预览与缓存

当我们选择多张图片后，通常会希望在页面上展示这些图片的缩略图，供用户预览。然而，直接加载所有图片的原始尺寸会导致内存占用过高。因此，我们需要对图片进行预处理，生成缩略图并缓存起来。

3.1 使用 `canvas` 生成缩略图

canvas 是一个非常强大的工具，可以帮助我们生成图片的缩略图。通过将图片绘制到 canvas 上，我们可以控制图片的尺寸，从而减少内存占用。下面是一个使用 canvas 生成缩略图的示例代码：

function generateThumbnail(imagePath, width, height) {
  return new Promise((resolve, reject) => {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    uni.getImageInfo({
      src: imagePath,
      success: function (imageInfo) {
        const aspectRatio = imageInfo.width / imageInfo.height;
        canvas.width = width;
        canvas.height = height / aspectRatio;

        ctx.drawImage(imageInfo.path, 0, 0, canvas.width, canvas.height);

        canvas.toDataURL('image/jpeg', 0.8, (dataURL) => {
          resolve(dataURL);
        });
      },
      fail: reject
    });
  });
}

在这个例子中，我们使用 uni.getImageInfo 获取图片的信息，然后将其绘制到 canvas 上，并生成一个缩小后的 dataURL。你可以将这个 dataURL 用于图片预览，而不会占用太多的内存。

3.2 缓存缩略图

为了避免每次都需要重新生成缩略图，我们可以将生成的缩略图缓存起来。UniApp 提供了 uni.setStorageSync 和 uni.getStorageSync 等 API，可以方便地进行本地存储。我们可以将缩略图的 dataURL 存储在本地，下次需要时直接读取即可。

function cacheThumbnail(imagePath, thumbnailData) {
  uni.setStorageSync(`thumbnail_${imagePath}`, thumbnailData);
}

function getCachedThumbnail(imagePath) {
  return uni.getStorageSync(`thumbnail_${imagePath}`);
}

通过这种方式，我们可以避免重复生成缩略图，进一步优化内存使用。

4. 图片上传与分批处理

在选择多张图片后，通常我们会将这些图片上传到服务器。如果一次性上传大量图片，可能会导致网络请求阻塞，影响用户体验。因此，我们可以采用分批上传的方式，逐步上传图片，避免一次性占用过多资源。

4.1 分批上传的实现

下面是一个简单的分批上传示例代码：

function uploadImagesInBatches(images, batchSize = 3) {
  let currentIndex = 0;

  function uploadBatch() {
    if (currentIndex >= images.length) {
      console.log('所有图片上传完成！');
      return;
    }

    const batch = images.slice(currentIndex, currentIndex + batchSize);

    batch.forEach((image) => {
      uni.uploadFile({
        url: 'https://your-server.com/upload', // 上传地址
        filePath: image,
        name: 'file',
        success: () => {
          console.log('图片上传成功:', image);
        },
        fail: () => {
          console.error('图片上传失败:', image);
        }
      });
    });

    currentIndex += batchSize;
    setTimeout(uploadBatch, 1000); // 每隔 1 秒上传下一批
  }

  uploadBatch();
}

在这个例子中，我们将图片分为多个批次，每次上传 3 张图片，并在每次上传完成后等待 1 秒再上传下一批。这样可以避免一次性上传过多图片，减少内存和网络资源的占用。

5. 总结

好了，今天的讲座就到这里啦！我们讨论了如何在 UniApp 中调用原生相册选择多图时进行内存优化。通过合理设置 sizeType 和 count 参数、使用 canvas 生成缩略图、缓存缩略图以及分批上传图片，我们可以有效减少内存占用，提升应用的性能和用户体验。

希望大家通过今天的分享，能够在自己的项目中应用这些技巧，打造出更加流畅、高效的移动端应用。如果有任何问题，欢迎随时提问哦！😊

参考资料：

[MDN Web Docs – Canvas API](MDN Web Docs)
W3C – HTML5 Canvas
[Apple Developer Documentation – Image Handling](Apple Developer)

感谢大家的聆听，祝大家 coding 快乐！✨

UniApp调用原生相册选择多图的内存优化讲座

1. 为什么需要内存优化？

2. UniApp 的相册选择 API

2.1 sizeType 参数的重要性

2.2 count 参数的限制