Mit heic2any kann .heic nicht in .jpg konvertiert werden ⇐ JavaScript

[Anonymous]

Ich habe diesen Code verwendet, um die .heic-Datei in meinem React-Web in .jpg zu konvertieren. Er läuft gut in der lokalen Umgebung, aber nach der Bereitstellung in der Produktion kann ich nur das Bild auswählen. Danach passiert nichts mehr in der Konsole oder im Netzwerk-Tab. Die CSP-Header enthalten worker-src „self“ blob: data:;
Hier ist mein Code zum Konvertieren von .heic in .jpg:

Code: Select all

export const convertToPNG = async (file: File): Promise => {
const lowerName = file.name.toLowerCase();
const mime = file.type;

const isHeic = mime === 'image/heic' || mime === 'image/heif' || /\.(heic|heif)$/i.test(lowerName);
const isTiff = mime === 'image/tiff' || /\.(tif|tiff)$/i.test(lowerName);

if (isHeic) {
try {
const outputBlob = (await heic2any({ blob: file, toType: ALLOW_MEDIA_TYPE.JPEG, quality: 0.92 })) as Blob;
const newName = lowerName.replace(/\.(heic|heif)$/i, '.jpg');
const converted = new File([outputBlob], newName, { type: ALLOW_MEDIA_TYPE.JPEG });
const preview = (await convertToBase64(converted)) as string;
return { file: converted, preview };
} catch (error) {
console.error('HEIC Conversion Failed:', error);
const preview = (await convertToBase64(file)) as string;
return { file, preview };
}
}
}

export const convertToBase64 = (file: File) =>
new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = reject;
});

export const isImage = (typeFile: string | undefined | null): boolean => {
if (!typeFile) return false;
if (typeFile.startsWith('image/')) return true;
return /\.(jpg|jpeg|png|heic|gif|bmp|tiff|webp|svg)$/i.test(typeFile);
};