Implement download/copy ImageFrame layer output (#1194)

* Implement download/copy ImageFrame layer output

* Add note about black transparency when copying

* Introspect node graph output type to conditionally disable the download button

---------

Co-authored-by: Dennis Kobert <dennis@kobert.dev>

frontend/src/io-managers/clipboard.ts

@@ -1,5 +1,6 @@
 import { type Editor } from "@graphite/wasm-communication/editor";
 import { TriggerTextCopy } from "@graphite/wasm-communication/messages";
+import { imageToPNG } from "~src/utility-functions/rasterization";
 
 export function createClipboardManager(editor: Editor): void {
 	// Subscribe to process backend event
@@ -8,3 +9,20 @@ export function createClipboardManager(editor: Editor): void {
 		navigator.clipboard?.writeText?.(triggerTextCopy.copyText);
 	});
 }
+
+export async function copyToClipboardFileURL(url: string): Promise<void> {
+	const response = await fetch(url);
+	const blob = await response.blob();
+
+	// TODO: Remove this if/when we end up returning PNG directly from the backend
+	const pngBlob = await imageToPNG(blob);
+
+	const clipboardItem: Record<string, Blob> = {};
+	clipboardItem[pngBlob.type] = pngBlob;
+	const data = [new ClipboardItem(clipboardItem)];
+
+	// Note: if this image has transparency, it will be lost and appear as black due to limitations of the way browsers handle copying transparent images
+	// This even happens if you just open a regular transparent PNG file in a browser tab, right click > copy, and paste it somewhere (the transparency will show up as black)
+	// This is true, at least, on Windows (it's worth checking on other OSs though)
+	navigator.clipboard.write(data);
+}