How We Made PNG Export More Responsive in Strokeline

说明与用途

Strokeline 的 PNG 导出通过分批渲染、在批次之间让出主线程、限制输出像素和尺寸，并使用 canvas.toBlob() 避免大 base64 字符串，从而变得更具响应性。

问题

Exporting a large scene as a PNG caused a single click to trigger long main‑thread work, freezing the page.

结果

The export became more responsive: rendering is cooperative, progress is reported, cancellation is possible, output size is capped, and memory usage is reduced by avoiding base64 strings.

工作流

• Compile and validate the current script
• Select the active scene and clamp playhead time
• Preload images and handwritten font
• Resolve the timeline into the state for that time
• Draw the scene to a canvas in batches of four nodes, yielding between batches
• Encode the canvas as a PNG Blob with canvas.toBlob()
• Download the Blob as a file

证据

Previously, the snapshot path drew all visible scene nodes in one synchronous pass.

The first improvement is to render in batches of four nodes. Between batches the renderer yields using requestAnimationFrame (or a timer fallback).

Canvas memory use grows with the number of output pixels. Strokeline now exports at 1× scale by default, caps the PNG at 4 million pixels, and also limits either output dimension to 8192 pixels.

After drawing, the exporter uses canvas.toBlob() and downloads the resulting PNG Blob. This avoids creating a large base64-encoded string as an intermediate representation.