Add WEBP, TIFF, ICO, TGA, HDR, and EXR image import and more raster export formats (#4554)

* Add WEBP, TIFF, ICO, TGA, HDR, and EXR image import and more raster export file types

* Try a file as TGA only when no image format is recognized

frontend/src/stores/portfolio.ts

@@ -3,8 +3,8 @@ import { SvelteMap } from "svelte/reactivity";
 import { writable } from "svelte/store";
 import type { Writable } from "svelte/store";
 import type { SubscriptionsRouter } from "/src/subscriptions-router";
-import { acceptStringFromFilters, downloadFile, downloadFileBlob, upload } from "/src/utility-functions/files";
-import { rasterizeSVG } from "/src/utility-functions/rasterization";
+import { acceptStringFromFilters, downloadFile, upload } from "/src/utility-functions/files";
+import { rasterizeSVGCanvas } from "/src/utility-functions/rasterization";
 import { patchLayout } from "/src/utility-functions/widgets";
 import type { EditorWrapper, DocumentInfo, LayerPanelEntry, LayerStructureEntry, Layout, WorkspacePanelLayout } from "/wrapper/pkg/graphite_wasm_wrapper";
 
@@ -108,17 +108,15 @@ export function createPortfolioStore(subscriptions: SubscriptionsRouter, editor:
 	});
 
 	subscriptions.subscribeFrontendMessage("TriggerExportImage", async (data) => {
-		const { svg, name, mime, size } = data;
+		const { svg, name, fileType, size } = data;
 
-		// Fill the canvas with white if it'll be a JPEG (which does not support transparency and defaults to black)
-		const backgroundColor = mime.endsWith("jpeg") ? "white" : undefined;
-
-		// Rasterize the SVG to an image file
+		// Rasterize the SVG and hand its pixels back to the editor for encoding
 		try {
-			const blob = await rasterizeSVG(svg, size[0], size[1], mime, backgroundColor);
+			const canvas = await rasterizeSVGCanvas(svg, size[0], size[1]);
+			const pixels = canvas.getContext("2d")?.getImageData(0, 0, canvas.width, canvas.height);
+			if (!pixels) return;
 
-			// Have the browser download the file to the user's disk
-			downloadFileBlob(name, blob);
+			editor.saveRasterizedExport(name, fileType, pixels.width, pixels.height, new Uint8Array(pixels.data.buffer));
 		} catch {
 			// Fail silently if there's an error rasterizing the SVG, such as a zero-sized image
 		}

frontend/src/utility-functions/rasterization.ts

@@ -33,24 +33,6 @@ export async function rasterizeSVGCanvas(svg: string, width: number, height: num
 	return canvas;
 }
 
-// Rasterize the string of an SVG document at a given width and height and turn it into the blob data of an image file matching the given MIME type
-export async function rasterizeSVG(svg: string, width: number, height: number, mime: string, backgroundColor?: string): Promise<Blob> {
-	if (!width || !height) throw new Error("Width and height must be nonzero when given to rasterizeSVG()");
-
-	const canvas = await rasterizeSVGCanvas(svg, width, height, backgroundColor);
-
-	// Convert the canvas to an image of the correct MIME type
-	const blob = await new Promise<Blob | undefined>((resolve) => {
-		canvas.toBlob((blob) => {
-			resolve(blob || undefined);
-		}, mime);
-	});
-
-	if (!blob) throw new Error("Converting canvas to blob data failed in rasterizeSVG()");
-
-	return blob;
-}
-
 export async function imageToCanvasContext(imageData: ImageBitmapSource): Promise<CanvasRenderingContext2D> {
 	// Special handling to rasterize an SVG file
 	let svgImageData;

frontend/wrapper/src/editor_commands.rs

@@ -604,6 +604,11 @@ mod editor_commands {
 		ClipboardMessage::ReadSelection { content, cut }.into()
 	}
 
+	/// The pixels of an export that `TriggerExportImage` had the frontend rasterize, which the editor encodes and saves as the chosen file type
+	fn save_rasterized_export(name: String, file_type: FileType, width: u32, height: u32, data: Vec<u8>) -> Message {
+		PortfolioMessage::SaveRasterizedExport { name, file_type, width, height, data }.into()
+	}
+
 	/// A file headed for a known action, picked in the dialog that `TriggerBrowse` opened
 	fn ingest_picked(name: String, mime_type: String, data: Vec<u8>, action: IngestAction) -> Message {
 		IngestMessage::Ingest {
@@ -743,6 +748,7 @@ macro_rules! editor_proxy_types {
 }
 
 editor_proxy_types! {
+	FileType = editor::messages::frontend::utility_types::FileType;
 	IngestAction = editor::messages::portfolio::ingest::utility_types::IngestAction;
 	LayoutTarget = editor::messages::layout::utility_types::layout_widget::LayoutTarget;
 	DockingSplitDirection = editor::messages::portfolio::utility_types::DockingSplitDirection;