Raster: Download PNG link

canvas.toBlob('image/png') re-encodes the rendered buffer.
Mirrors the Vector tab's SVG/PDF download UX (button + size
tag), wired up after every render.

Assisted-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: behdad

index.html

@@ -319,6 +319,11 @@ <h3>Per-table breakdown</h3>
        <a href="https://harfbuzz.github.io/integration-freetype.html">hb-ft</a>
        if you need hinted output at small sizes.</p>
     <div class="render"><canvas id="raster-canvas"></canvas></div>
+    <div class="controls demo-controls">
+      <a id="raster-dl-png" href="#" download="text.png">
+        Download PNG <span class="size-tag" id="raster-png-size"></span>
+      </a>
+    </div>
     <p class="raster-stats" id="raster-stats"></p>
   </section>
 

js/app.js

@@ -373,6 +373,9 @@
   const rasterCanvas = document.getElementById ("raster-canvas");
   const rasterCtx    = rasterCanvas.getContext ("2d");
   const rasterStats  = document.getElementById ("raster-stats");
+  const rasterDl     = document.getElementById ("raster-dl-png");
+  const rasterPngSize = document.getElementById ("raster-png-size");
+  let rasterPngUrl   = null;
   function renderRaster () {
     withText ((textPtr) => {
       const wPtr = Module._malloc (4);
@@ -412,6 +415,16 @@
         w + " × " + h + " px"
         + " (" + (w / dpr).toFixed (0) + " × " + (h / dpr).toFixed (0) + " CSS px"
         + " · " + dpr + "× DPR)";
+      /* Re-encode the canvas as PNG for the download link.
+       * toBlob is async; the previous URL is revoked once the
+       * new one lands so we don't leak. */
+      rasterCanvas.toBlob ((blob) => {
+        if (!blob) return;
+        if (rasterPngUrl) URL.revokeObjectURL (rasterPngUrl);
+        rasterPngUrl = URL.createObjectURL (blob);
+        rasterDl.href = rasterPngUrl;
+        rasterPngSize.textContent = fmtBytes (blob.size);
+      }, "image/png");
     });
   }