Canvas图片转Base64上传至.NET Core服务间歇性异常求助

针对你遇到的Canvas压缩后上传跨设备成功率差异（iPhone端极低）的问题，给出以下针对性修复步骤：

1. 强制确保Canvas绘制完成后再执行转换 #

iPhone端浏览器对Canvas渲染队列的调度更严格，drawImage后立即调用toBlob/toDataURL可能会捕获到未完成绘制的空白Canvas，导致无数据或无效Base64。用requestAnimationFrame包裹转换逻辑，等待浏览器完成当前帧渲染：

const img = new Image();
img.onload = async () => {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  // 根据需求设置压缩后的尺寸
  canvas.width = img.width * 0.5;
  canvas.height = img.height * 0.5;
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

  // 等待浏览器完成Canvas绘制
  await new Promise(resolve => requestAnimationFrame(resolve));

  // 执行后续转换与上传
  canvas.toBlob(blob => {
    const formData = new FormData();
    formData.append('uploadFile', blob, `compressed_${Date.now()}.jpg`);
    // 发起后端请求
    fetch('/api/upload', { method: 'POST', body: formData });
  }, 'image/jpeg', 0.8);
};
img.src = URL.createObjectURL(selectedFile);

2. 兼容Safari的toBlob降级逻辑 #

Safari（含iOS）对toBlob的支持存在细节缺陷，比如绘制内容异常时返回null，此时需要降级到toDataURL并手动转换为Blob：

// 封装Canvas转Blob的兼容方法
function getCanvasBlob(canvas, mimeType = 'image/jpeg', quality = 0.8) {
  return new Promise((resolve) => {
    if (canvas.toBlob) {
      canvas.toBlob(blob => {
        if (blob) return resolve(blob);
        // toBlob失败时降级到toDataURL
        const dataURL = canvas.toDataURL(mimeType, quality);
        resolve(dataURLToBlob(dataURL));
      }, mimeType, quality);
    } else {
      // 旧浏览器直接用toDataURL转换
      const dataURL = canvas.toDataURL(mimeType, quality);
      resolve(dataURLToBlob(dataURL));
    }
  });
}

// DataURL转Blob工具函数
function dataURLToBlob(dataURL) {
  const [header, data] = dataURL.split(',');
  const mime = header.match(/:(.*?);/)[1];
  const byteString = atob(data);
  const uint8Array = new Uint8Array(byteString.length);
  for (let i = 0; i < byteString.length; i++) {
    uint8Array[i] = byteString.charCodeAt(i);
  }
  return new Blob([uint8Array], { type: mime });
}

3. 处理iOS图片的EXIF方向问题 #

iOS拍摄的图片带有EXIF方向标记，Canvas默认不会自动校正，导致绘制的图片旋转/尺寸异常，进而转换失败。需要读取EXIF方向并调整Canvas绘制：

// 读取图片EXIF方向（无需外部库）
async function getImageOrientation(file) {
  return new Promise(resolve => {
    const reader = new FileReader();
    reader.onload = (e) => {
      const view = new DataView(e.target.result);
      if (view.getUint16(0, false) !== 0xFFD8) return resolve(1); // 不是JPG直接返回默认方向
      
      let offset = 2;
      const length = view.byteLength;
      while (offset < length) {
        const marker = view.getUint16(offset, false);
        offset += 2;
        if (marker === 0xFFE1) { // 找到EXIF标记
          if (view.getUint32(offset += 2, false) !== 0x45786966) return resolve(1);
          const isLittleEndian = view.getUint16(offset += 6, false) === 0x4949;
          offset += view.getUint32(offset + 4, isLittleEndian);
          const tagCount = view.getUint16(offset, isLittleEndian);
          offset += 2;
          for (let i = 0; i < tagCount; i++) {
            if (view.getUint16(offset + i * 12, isLittleEndian) === 0x0112) { // 方向标记
              resolve(view.getUint16(offset + i * 12 + 8, isLittleEndian));
              return;
            }
          }
        } else if ((marker & 0xFF00) !== 0xFF00) break;
        else offset += view.getUint16(offset, false);
      }
      resolve(1);
    };
    reader.readAsArrayBuffer(file.slice(0, 64 * 1024)); // 仅读取文件头部分
  });
}

// 带方向校正的Canvas绘制
async function drawImageWithOrientation(ctx, img, file) {
  const orientation = await getImageOrientation(file);
  const { width, height } = img;
  
  // 根据方向调整Canvas坐标系
  switch (orientation) {
    case 2: ctx.scale(-1, 1); ctx.translate(-width, 0); break;
    case 3: ctx.rotate(Math.PI); ctx.translate(-width, -height); break;
    case 4: ctx.scale(1, -1); ctx.translate(0, -height); break;
    case 5: ctx.rotate(0.5 * Math.PI); ctx.scale(-1, 1); ctx.translate(-height, 0); break;
    case 6: ctx.rotate(0.5 * Math.PI); ctx.translate(0, -height); break;
    case 7: ctx.rotate(0.5 * Math.PI); ctx.scale(1, -1); ctx.translate(-height, -width); break;
    case 8: ctx.rotate(-0.5 * Math.PI); ctx.translate(-width, 0); break;
  }
  
  ctx.drawImage(img, 0, 0, width, height);
}

4. 后端Base64容错处理 #

如果使用toDataURL上传，后端需处理可能的格式异常：

// .NET Core 中Base64转字节数组的容错处理
public static byte[] SafeBase64Decode(string base64Str)
{
    // 清理无效字符
    base64Str = base64Str.Replace("\n", "").Replace("\r", "").Replace(" ", "");
    // 兼容URL安全的Base64编码
    base64Str = base64Str.Replace("-", "+").Replace("_", "/");
    // 补全缺失的padding
    int padding = 4 - (base64Str.Length % 4);
    if (padding != 4)
    {
        base64Str += new string('=', padding);
    }
    return Convert.FromBase64String(base64Str);
}

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