Ionic Capacitor iOS端Blob()构造函数返回空对象问题

问题场景 #

基于Ionic+Capacitor开发的WordPress图片上传应用，Android端功能正常，但iOS端将Camera插件返回的Base64图片数据转换为Blob时，得到的是空对象。

问题原因 #

Capacitor Camera插件在iOS端返回的Base64字符串默认带有data:image/jpeg;base64,这类前缀，你的转换函数直接对完整字符串调用atob()，前缀部分并非有效的Base64编码字符，导致解码后的byteCharacters为空，最终生成的Blob自然是空对象。

解决方案 #

在转换前先剥离Base64字符串的前缀部分，只保留纯Base64编码内容。修改后的转换函数如下：

const b64toBlob = (b64Data: string, contentType = 'image/jpeg', sliceSize = 512) => {
    // 剥离base64前缀，兼容常见图片格式
    const base64Raw = b64Data.replace(/^data:image\/(jpeg|png|gif);base64,/, '');
    const byteCharacters = atob(base64Raw);
    const byteArrays = [];

    for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
        const slice = byteCharacters.slice(offset, offset + sliceSize);
        const byteNumbers = new Array(slice.length);
        
        for (let i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i);
        }

        const byteArray = new Uint8Array(byteNumbers);
        byteArrays.push(byteArray);
    }

    const blob = new Blob(byteArrays, { type: contentType });
    return blob;
};
export default b64toBlob;

额外验证建议 #

• 转换前打印base64Raw，确认已剥离前缀，仅保留纯Base64编码内容；
• 若需更严谨，可在调用Camera插件时检查配置：设置resultType: CameraResultType.Base64，部分iOS版本仍会自动添加前缀，因此手动剥离是更可靠的方案。

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