Fix image uploads and reduce flyer request sizes

This commit is contained in:
kai
2026-08-27 07:34:45 +02:00
parent 41b2c5cd61
commit fd8c216cc8
4 changed files with 96 additions and 5 deletions
+42
View File
@@ -877,6 +877,48 @@ flyerInput.addEventListener(
}
);
// Große Flyer vor dem Absenden verkleinern. Dadurch bleibt der Multipart-
// Request unter typischen Proxy-Limits und der Server muss keine riesigen
// Originaldateien verarbeiten.
const concertForm = flyerInput.form;
async function optimizeFlyerUpload(file) {
const bitmap = await createImageBitmap(file);
const maxSide = 1800;
const scale = Math.min(1, maxSide / Math.max(bitmap.width, bitmap.height));
const canvas = document.createElement("canvas");
canvas.width = Math.max(1, Math.round(bitmap.width * scale));
canvas.height = Math.max(1, Math.round(bitmap.height * scale));
const context = canvas.getContext("2d");
context.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
bitmap.close();
let quality = 0.86;
let blob;
do {
blob = await new Promise(resolve => canvas.toBlob(resolve, "image/jpeg", quality));
quality -= 0.08;
} while (blob && blob.size > 900 * 1024 && quality >= 0.5);
if (!blob) throw new Error("Bild konnte nicht verarbeitet werden");
return new File([blob], "flyer.jpg", {type: "image/jpeg"});
}
concertForm.addEventListener("submit", async event => {
if (concertForm.dataset.flyerOptimized === "true") return;
const file = flyerInput.files[0];
if (!file) return;
event.preventDefault();
try {
const transfer = new DataTransfer();
transfer.items.add(await optimizeFlyerUpload(file));
flyerInput.files = transfer.files;
concertForm.dataset.flyerOptimized = "true";
concertForm.requestSubmit();
} catch (error) {
console.error("Flyer optimization failed:", error);
concertForm.dataset.flyerOptimized = "true";
concertForm.requestSubmit();
}
});
/* ============================================================
HTML ESCAPING