使用ngx-image-cropper下载裁剪图片时遭遇atob执行失败错误

问题描述 #

使用ngx-image-cropper实现图片裁剪后，裁剪结果可正常展示，Chrome右键另存为功能正常，但点击自定义下载按钮时触发错误：

Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded

已通过在线工具验证base64编码正确，尝试两种手动转Blob方案均无效。

可能原因 #

手动处理base64字符串时，容易遇到以下问题：

• 数据URL中的base64部分可能包含URL编码字符（如%2B、%2F），直接用atob解码会失败
• base64字符串缺少必要的填充字符=，导致解码格式错误
• 手动解析数据URL前缀时出现遗漏或错误

解决方案：使用Fetch API简化Blob转换 #

避免手动处理base64的繁琐步骤，直接利用Fetch API将数据URL转换为Blob，代码更简洁且容错性更高：

saveCroppedImage(): void {
  if (this.croppedImage) {
    fetch(this.croppedImage)
      .then(res => res.blob())
      .then(blob => {
        const url = URL.createObjectURL(blob);
        const anchor = document.createElement('a');
        anchor.href = url;
        anchor.download = 'cropped_image.jpeg';
        anchor.click();
        URL.revokeObjectURL(url);
      })
      .catch(err => console.error('下载失败:', err));
  }
}

对应的模板部分保持不变：

<div *ngIf="croppedImage">
  <button (click)="saveCroppedImage()">Download Image</button>
</div>

为什么这个方案有效？ #

• Fetch API会自动处理数据URL的前缀解析和base64解码，无需手动拆分或替换字符
• 内部处理了URL编码的base64字符，避免atob的格式错误
• 代码逻辑更清晰，减少手动转换带来的潜在bug

备选修复：完善手动base64转Blob逻辑 #

如果必须手动处理，需确保base64字符串完全符合atob的要求：

private base64toBlob(base64String: string): Blob {
  // 移除数据URL前缀
  const base64WithoutPrefix = base64String.replace(/^data:image\/(png|jpeg|jpg);base64,/, '');
  // 解码URL编码的字符
  const decoded = decodeURIComponent(base64WithoutPrefix);
  // 补充base64填充字符（如果缺失）
  const padded = decoded.padEnd(decoded.length + (4 - decoded.length % 4) % 4, '=');
  
  const byteCharacters = atob(padded);
  const byteArray = new Uint8Array(byteCharacters.length);
  for (let i = 0; i < byteCharacters.length; i++) {
    byteArray[i] = byteCharacters.charCodeAt(i);
  }
  return new Blob([byteArray], { type: 'image/jpeg' });
}

然后在saveCroppedImage中直接传入this.croppedImage即可。

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