fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-24 12:18:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

Remove blob URL dead code and clean up more frontend code (#2199)

Browse Source
This commit is contained in:
Keavon Chambers
2025-01-14 13:08:47 -08:00
committed by GitHub
parent 1e62af88cd
commit 9ad6c31483
56 changed files with 107 additions and 247 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/utility-functions/files.ts
-29
View File
@@ -59,32 +59,3 @@ export async function upload<T extends "text" | "data" | "both">(acceptedExtensi
}
export type UploadResult<T> = { filename: string; type: string; content: UploadResultType<T> };
type UploadResultType<T> = T extends "text" ? string : T extends "data" ? Uint8Array : T extends "both" ? { text: string; data: Uint8Array } : never;
export function blobToBase64(blob: Blob): Promise<string> {
return new Promise((resolve) => {
const reader = new FileReader();
reader.onloadend = () => resolve(typeof reader.result === "string" ? reader.result : "");
reader.readAsDataURL(blob);
});
}
export async function replaceBlobURLsWithBase64(svg: string): Promise<string> {
const splitByBlobs = svg.split(/("blob:.*?")/);
const onlyBlobs = splitByBlobs.filter((_, i) => i % 2 === 1);
const onlyBlobsConverted = onlyBlobs.map(async (blobURL) => {
const urlWithoutQuotes = blobURL.slice(1, -1);
const data = await fetch(urlWithoutQuotes);
const dataBlob = await data.blob();
return blobToBase64(dataBlob);
});
const base64Images = await Promise.all(onlyBlobsConverted);
const substituted = splitByBlobs.map((segment, i) => {
if (i % 2 === 0) return segment;
const blobsIndex = Math.floor(i / 2);
return `"${base64Images[blobsIndex]}"`;
});
return substituted.join("");
}
frontend/src/utility-functions/rasterization.ts
+1 -18
View File
@@ -1,5 +1,3 @@
import { replaceBlobURLsWithBase64 } from "@graphite/utility-functions/files";
// Rasterize the string of an SVG document at a given width and height and return the canvas it was drawn onto during the rasterization process
export async function rasterizeSVGCanvas(svg: string, width: number, height: number, backgroundColor?: string): Promise<HTMLCanvasElement> {
// A canvas to render our SVG to in order to get a raster image
@@ -15,11 +13,8 @@ export async function rasterizeSVGCanvas(svg: string, width: number, height: num
context.fillRect(0, 0, width, height);
}
// This SVG rasterization scheme has the limitation that it cannot access blob URLs, so they must be inlined to base64 URLs
const svgWithBase64Images = await replaceBlobURLsWithBase64(svg);
// Create a blob URL for our SVG
const svgBlob = new Blob([svgWithBase64Images], { type: "image/svg+xml;charset=utf-8" });
const svgBlob = new Blob([svg], { type: "image/svg+xml;charset=utf-8" });
const url = URL.createObjectURL(svgBlob);
// Load the Image from the URL and wait until it's done
@@ -65,18 +60,6 @@ export async function extractPixelData(imageData: ImageBitmapSource): Promise<Im
return canvasContext.getImageData(0, 0, width, height);
}
/// Convert an image source (e.g. BMP document) into a PNG blob
export async function imageToPNG(imageData: ImageBitmapSource): Promise<Blob> {
const canvasContext = await imageToCanvasContext(imageData);
return new Promise((resolve, reject) => {
canvasContext.canvas.toBlob((pngBlob) => {
if (pngBlob) resolve(pngBlob);
else reject("Converting canvas to blob data failed in imageToPNG()");
}, "image/png");
});
}
export async function imageToCanvasContext(imageData: ImageBitmapSource): Promise<CanvasRenderingContext2D> {
// Special handling to rasterize an SVG file
let svgImageData;
frontend/src/utility-functions/viewports.ts
+1 -1
View File
@@ -1,4 +1,4 @@
import { type Editor } from "@graphite/wasm-communication/editor";
import { type Editor } from "@graphite/editor";
export function updateBoundsOfViewports(editor: Editor, container: HTMLElement) {
const viewports = Array.from(container.querySelectorAll("[data-viewport]"));