ngx-image-cropper@7.1.1中ImageCroppedEvent的base64ToFile替代方案报错

错误原因 #

你当前报错的核心是：this.sanitizer.bypassSecurityTrustUrl(event.objectUrl)返回的是SafeUrl对象，而非字符串格式的URL，而dataURLtoFile函数需要传入字符串类型的dataURL，因此调用split时触发类型错误。

两种可行解决方案 #

方案一：直接使用event返回的base64字符串 #

ImageCroppedEvent通常会直接返回裁剪后图片的base64字符串，直接存储该字符串即可适配原有dataURLtoFile函数：

// 存储base64字符串用于后续转换，同时生成安全URL用于页面显示
imageCropped(event: ImageCroppedEvent) {
    this.croppedImageBase64 = event.base64;
    this.displayImage = this.sanitizer.bypassSecurityTrustUrl(event.base64);
}

onCrop() {
    const file = dataURLtoFile(this.croppedImageBase64, this.imageFile.name);
    this.changed.emit(file);
}

// 保留原有的dataURLtoFile函数
export const dataURLtoFile = (dataurl, filename): File => {
    const arr = dataurl.split(',');
    const mime = arr[0].match(/:(.*?);/)[1];
    const bstr = atob(arr[1]);
    let n = bstr.length;
    const u8arr = new Uint8Array(n);

    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }

    return new File([u8arr], filename, { type: mime });
};

方案二：基于objectUrl转换为File（适合大图片场景） #

如果偏好使用objectUrl，由于它不是dataURL格式，不能直接用dataURLtoFile，需通过fetch将其转为Blob再生成File：

// 存储原始objectUrl字符串，生成安全URL用于显示
imageCropped(event: ImageCroppedEvent) {
    this.croppedObjectUrl = event.objectUrl;
    this.displayImage = this.sanitizer.bypassSecurityTrustUrl(event.objectUrl);
}

onCrop() {
    fetch(this.croppedObjectUrl)
        .then(response => response.blob())
        .then(blob => {
            const file = new File([blob], this.imageFile.name, { type: blob.type });
            this.changed.emit(file);
            // 释放objectUrl资源，避免内存泄漏
            URL.revokeObjectURL(this.croppedObjectUrl);
        })
        .catch(error => console.error('转换objectUrl为File失败:', error));
}

注意：使用objectUrl后记得调用URL.revokeObjectURL释放浏览器资源，防止内存泄漏。

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