External/SnapOtter
1
0
Fork 0
mirror of https://github.com/snapotter-hq/SnapOtter.git synced 2026-08-03 07:46:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: recover AVIF/TIFF/GIF/JXL/PSD export from orphaned commit

Browse Source 
Recovers expanded export format support from orphaned commit 80961c01
and PSD export from b07ecd5. The editor export dialog now supports 7
formats (PNG, JPEG, WebP client-side; AVIF, TIFF, GIF, JXL via server
conversion). PSD export uses ImageMagick on the backend.
This commit is contained in:
SnapOtter
2026-05-08 21:06:29 +08:00
parent 321c5da998
commit 3a02affae3
2 changed files with 109 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/api/src/routes/tools/convert.ts
+48 -5
View File
@@ -1,4 +1,9 @@
import { extname } from "node:path";
import { execFile } from "node:child_process";
import { randomUUID } from "node:crypto";
import { readFile, rm, writeFile } from "node:fs/promises";
import { tmpdir } from "node:os";
import { extname, join } from "node:path";
import { promisify } from "node:util";
import { convert } from "@snapotter/image-engine";
import type { FastifyInstance } from "fastify";
import sharp from "sharp";
@@ -7,6 +12,28 @@ import { encodeHeic } from "../../lib/heic-converter.js";
import { isSvgBuffer } from "../../lib/svg-sanitize.js";
import { createToolRoute } from "../tool-factory.js";
const execFileAsync = promisify(execFile);
let cachedMagickCmd: string | null = null;
async function findMagickCmd(): Promise<string> {
if (cachedMagickCmd) return cachedMagickCmd;
for (const cmd of ["magick", "convert"]) {
try {
await execFileAsync(cmd, ["--version"], { timeout: 5_000 });
cachedMagickCmd = cmd;
return cmd;
} catch {
// try next
}
}
throw new Error("No ImageMagick found. Install imagemagick (provides convert/magick).");
}
function magickArgs(cmd: string, args: string[]): string[] {
return cmd === "magick" ? ["convert", ...args] : args;
}
const FORMAT_CONTENT_TYPES: Record<string, string> = {
jpg: "image/jpeg",
png: "image/png",
@@ -16,10 +43,11 @@ const FORMAT_CONTENT_TYPES: Record<string, string> = {
gif: "image/gif",
heic: "image/heic",
heif: "image/heif",
psd: "image/vnd.adobe.photoshop",
};
const settingsSchema = z.object({
format: z.enum(["jpg", "png", "webp", "avif", "tiff", "gif", "heic", "heif"]),
format: z.enum(["jpg", "png", "webp", "avif", "tiff", "gif", "heic", "heif", "psd"]),
quality: z.number().min(1).max(100).optional(),
});
@@ -32,12 +60,27 @@ export function registerConvert(app: FastifyInstance) {
const image = sharp(inputBuffer, sharpOpts);
let buffer: Buffer;
if (settings.format === "heic" || settings.format === "heif") {
// Sharp cannot encode HEVC. Convert to PNG first, then use heif-enc.
if (settings.format === "psd") {
const pngBuffer = await image.png().toBuffer();
const id = randomUUID();
const inputPath = join(tmpdir(), `psd-enc-in-${id}.png`);
const outputPath = join(tmpdir(), `psd-enc-out-${id}.psd`);
try {
await writeFile(inputPath, pngBuffer);
const cmd = await findMagickCmd();
await execFileAsync(cmd, magickArgs(cmd, [inputPath, `psd:${outputPath}`]), {
timeout: 120_000,
});
buffer = await readFile(outputPath);
} finally {
await rm(inputPath, { force: true }).catch(() => {});
await rm(outputPath, { force: true }).catch(() => {});
}
} else if (settings.format === "heic" || settings.format === "heif") {
const pngBuffer = await image.png().toBuffer();
buffer = await encodeHeic(pngBuffer, settings.quality);
} else {
const result = await convert(image, settings);
const result = await convert(image, settings as Parameters<typeof convert>[1]);
buffer = await result.toBuffer();
}
apps/web/src/components/editor/common/export-dialog.tsx
+61 -22
View File
@@ -23,7 +23,7 @@ import type {
Guide,
} from "@/types/editor";
type ExportFormat = "png" | "jpeg" | "webp";
type ExportFormat = "png" | "jpeg" | "webp" | "avif" | "tiff" | "gif" | "jxl";
interface ExportSettings {
format: ExportFormat;
@@ -34,10 +34,19 @@ interface ExportSettings {
transparent: boolean;
}
const FORMAT_OPTIONS: { value: ExportFormat; label: string; supportsTransparency: boolean }[] = [
{ value: "png", label: "PNG", supportsTransparency: true },
{ value: "jpeg", label: "JPEG", supportsTransparency: false },
{ value: "webp", label: "WebP", supportsTransparency: true },
const FORMAT_OPTIONS: {
value: ExportFormat;
label: string;
supportsTransparency: boolean;
needsServerConvert: boolean;
}[] = [
{ value: "png", label: "PNG", supportsTransparency: true, needsServerConvert: false },
{ value: "jpeg", label: "JPEG", supportsTransparency: false, needsServerConvert: false },
{ value: "webp", label: "WebP", supportsTransparency: true, needsServerConvert: false },
{ value: "avif", label: "AVIF", supportsTransparency: true, needsServerConvert: true },
{ value: "tiff", label: "TIFF", supportsTransparency: true, needsServerConvert: true },
{ value: "gif", label: "GIF", supportsTransparency: true, needsServerConvert: true },
{ value: "jxl", label: "JXL", supportsTransparency: true, needsServerConvert: true },
];
function getMimeType(format: ExportFormat): string {
@@ -48,6 +57,8 @@ function getMimeType(format: ExportFormat): string {
return "image/jpeg";
case "webp":
return "image/webp";
default:
return "image/png";
}
}
@@ -169,23 +180,51 @@ export function ExportDialog({ onClose }: { onClose: () => void }) {
});
}
// Convert data URL to blob for download
fetch(dataUrl)
.then((res) => res.blob())
.then((blob) => {
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = `export.${settings.format}`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
markClean();
})
.catch((err) => {
console.error("Export failed:", err);
});
const formatOpt = FORMAT_OPTIONS.find((f) => f.value === settings.format);
if (formatOpt?.needsServerConvert) {
fetch(dataUrl)
.then((res) => res.blob())
.then(async (pngBlob) => {
const formData = new FormData();
formData.append("file", pngBlob, "export.png");
formData.append(
"settings",
JSON.stringify({ format: settings.format, quality: settings.quality }),
);
const res = await fetch("/api/v1/tools/convert", { method: "POST", body: formData });
if (!res.ok) throw new Error("Server conversion failed");
const json = await res.json();
if (json.downloadUrl) {
const a = document.createElement("a");
a.href = json.downloadUrl;
a.download = `export.${settings.format}`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
markClean();
}
})
.catch((err) => {
console.error("Export failed:", err);
});
} else {
fetch(dataUrl)
.then((res) => res.blob())
.then((blob) => {
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = `export.${settings.format}`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
markClean();
})
.catch((err) => {
console.error("Export failed:", err);
});
}
}, [settings, canvasSize, markClean]);
// Issue #6: Copy to clipboard using Konva stage