uni-app base64大于100kb的图片预览真机闪退

在 uni-app 中，处理大于 100KB 的 Base64 图片时，真机预览可能会出现闪退的情况。这通常是由于以下原因导致的：

1. 内存限制：Base64 编码的图片会占用更多的内存，尤其是在移动设备上，内存资源有限，处理大图片时容易导致内存溢出，从而引发闪退。

2. 性能问题：Base64 图片需要解码后才能显示，解码大图片会消耗大量的 CPU 资源，导致应用卡顿甚至崩溃。

解决方案

1. 压缩图片

• 在上传或使用图片之前，先对图片进行压缩，减小图片的大小。
• 可以使用第三方库或工具（如 canvas、image-compressor 等）来压缩图片。

2. 使用 URL 代替 Base64

• 如果可能，尽量避免使用 Base64 编码的图片，而是将图片上传到服务器，然后使用图片的 URL 进行显示。
• 这样可以减少内存占用，提高性能。

3. 分块加载

• 如果必须使用 Base64 图片，可以尝试将图片分块加载，避免一次性加载大图片导致内存溢出。

4. 优化图片显示

• 使用 image 组件的 lazy-load 属性，延迟加载图片，减少初始加载时的内存压力。
• 使用 image 组件的 mode 属性，选择合适的图片显示模式，避免不必要的内存消耗。

5. 使用原生插件

• 如果 uni-app 的原生能力无法满足需求，可以考虑使用原生插件来处理大图片的显示和预览。

6. 增加内存限制

• 在 manifest.json 中增加 "largeHeap": true，尝试增加应用的内存限制，但这并不是一个根本的解决方案，且不一定在所有设备上都有效。

示例代码

压缩图片

function compressImage(file) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.src = URL.createObjectURL(file);
    img.onload = () => {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      const maxWidth = 800;
      const maxHeight = 800;
      let width = img.width;
      let height = img.height;

      if (width > height) {
        if (width > maxWidth) {
          height *= maxWidth / width;
          width = maxWidth;
        }
      } else {
        if (height > maxHeight) {
          width *= maxHeight / height;
          height = maxHeight;
        }
      }

      canvas.width = width;
      canvas.height = height;
      ctx.drawImage(img, 0, 0, width, height);

      canvas.toBlob((blob) => {
        resolve(blob);
      }, 'image/jpeg', 0.8);
    };
    img.onerror = reject;
  });
}

使用 URL 代替 Base64

// 上传图片到服务器
function uploadImage(file) {
  const formData = new FormData();
  formData.append('file', file);

  return uni.uploadFile({
    url: 'https://your-server.com/upload',
    filePath: file.path,
    name: 'file',
    formData: formData,
  });
}

// 使用返回的 URL 显示图片
uploadImage(file).then(response => {
  const imageUrl = response.data.url;
  // 使用 imageUrl 显示图片
});