@import url("/assets/md.css")fix: use toBlob to significantly improve performance HEADmaster

@import url("/assets/md.css")toObjectURL used to use 70-ish % of the render time, toBlob only uses 13%

1 files changed, 6 insertions, 1 deletions

diff --git a/src/lib/Renderer/Renderer.svelte b/src/lib/Renderer/Renderer.svelte
index e848312..c3223a6 100644
--- a/src/lib/Renderer/Renderer.svelte
+++ b/src/lib/Renderer/Renderer.svelte
@@ -58,7 +58,12 @@
 				seconds: frame / video.fps
 			});
 			// TODO: see if we can pipe this into an active ffmpeg instead of writing a file then running a command after
-			const file = await fetchFile(c.toDataURL());
+			const blob = await new Promise<Blob>((rs, rj) =>
+				c.toBlob((blob) => (blob ? rs(blob) : rj(new Error('No blob gotten back'))), 'image/png')
+			);
+			const u = URL.createObjectURL(blob);
+			const file = await fetchFile(u);
+			URL.revokeObjectURL(u);
 			await ffmpeg.writeFile('frames/f' + frame.toString().padStart(10, '0') + '.png', file);
 			if (performance.now() > lastAnimationFrame + 33) {
 				await new Promise((rs) => requestAnimationFrame(rs));