基于jQuery+CodeIgniter的iPad端360张图片本地存储上传方案问询

针对你的场景（jQuery前端+CodeIgniter后端、iPad Air2弱网环境下采集360张JPG），以下是满足所有需求的可行方案：

核心技术选型 #

采用 IndexedDB 做本地持久化存储，配合 Canvas图片压缩 控制内存占用，通过 URL.createObjectURL 实现按需显示，最后分批次批量上传至服务器。

1. 本地存储：用IndexedDB保障数据不丢失 #

IndexedDB是浏览器原生的异步数据库，支持存储Blob对象（图片文件的二进制形式），数据持久化不受页面刷新、设备断电影响，且存储在磁盘而非运存，不会占用宝贵的内存资源。

关键实现逻辑：

• 初始化一个IndexedDB数据库，创建images对象仓库，存储每张图片的元数据：
  • id：图片序号（1-360）
  • fileBlob：图片的Blob对象
  • uploaded：上传状态（true/false）
  • fileName：原始文件名

2. 内存控制：压缩+按需加载双管齐下 #

iPad Air2运存2GB，必须严格控制内存占用：

• 客户端图片压缩：采集图片后立即用Canvas压缩，降低单张图片体积：
  • 限制图片长边最大为1920px（匹配iPad Air2屏幕分辨率，满足显示需求）
  • JPG质量设为0.7-0.8，单张图片可压缩至500KB左右，360张总存储约180MB，远低于运存上限
• 按需加载释放内存：只在需要显示某张图片时，才将Blob转为临时URL，显示完成后立即释放内存：
  • 使用URL.createObjectURL(blob)生成临时显示URL，避免将整个图片加载到内存
  • 切换图片时，调用URL.revokeObjectURL(oldUrl)释放之前的内存

图片压缩代码示例（jQuery）：

function compressImage(file, maxWidth = 1920, quality = 0.7) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = function(e) {
      const img = new Image();
      img.onload = function() {
        const canvas = document.createElement('canvas');
        let width = img.width;
        let height = img.height;

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

        canvas.width = width;
        canvas.height = height;
        const ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0, width, height);

        canvas.toBlob(
          (blob) => resolve(blob),
          'image/jpeg',
          quality
        );
      };
      img.src = e.target.result;
    };
    reader.onerror = reject;
    reader.readAsDataURL(file);
  });
}

3. 按需显示：单张加载+内存释放 #

实现图片切换功能时，仅加载当前需要显示的图片：

let currentImageUrl = null;

// 加载并显示指定序号的图片
async function loadImageById(imageId) {
  // 释放之前的图片内存
  if (currentImageUrl) {
    URL.revokeObjectURL(currentImageUrl);
  }

  // 从IndexedDB读取图片Blob
  const imageData = await getImageFromIndexedDB(imageId);
  if (!imageData) return;

  // 生成临时URL并显示
  currentImageUrl = URL.createObjectURL(imageData.fileBlob);
  $('#display-image').attr('src', currentImageUrl);
}

// 示例：切换上一张/下一张
$('#prev-btn').click(() => {
  const currentId = parseInt($('#current-id').text());
  if (currentId > 1) loadImageById(currentId - 1);
});

$('#next-btn').click(() => {
  const currentId = parseInt($('#current-id').text());
  if (currentId < 360) loadImageById(currentId + 1);
});

4. Data URIs vs 文件压缩打包优劣对比 #

结论：你的场景更适合用Blob存储，而非Data URIs或压缩打包——Blob存储体积小、内存占用低，按需显示更灵活，避免压缩打包带来的性能开销。

5. 批量上传：分批次+断点续传 #

• 从IndexedDB中筛选未上传的图片，每次批量上传10张（可根据网络情况调整）
• 上传成功后更新对应图片的uploaded状态，避免重复上传
• 网络恢复时自动触发未上传图片的上传任务

批量上传代码示例（CodeIgniter后端配合）：

async function batchUpload() {
  // 获取未上传的图片列表
  const unuploadedImages = await getUnuploadedImagesFromIndexedDB();
  if (unuploadedImages.length === 0) return;

  // 分批次上传，每次10张
  const batchSize = 10;
  for (let i = 0; i < unuploadedImages.length; i += batchSize) {
    const batch = unuploadedImages.slice(i, i + batchSize);
    const formData = new FormData();

    batch.forEach(img => {
      formData.append('images[]', img.fileBlob, img.fileName);
      formData.append('image_ids[]', img.id);
    });

    try {
      await $.ajax({
        url: '/api/upload-images',
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        async: true
      });

      // 标记上传成功
      await markImagesAsUploaded(batch.map(img => img.id));
    } catch (error) {
      console.error('上传批次失败，将重试:', error);
      // 可添加重试逻辑，或记录失败批次
      break;
    }
  }
}

内容的提问来源于stack exchange，提问作者mshaw