How We Made PNG Export More Responsive in Strokeline

Описание и применение

Экспорт PNG в Strokeline стал более отзывчивым: рендеринг разбит на пакеты из четырёх узлов, между пакетами браузер получает возможность реагировать, ограничено число пикселей и размер изображения, а изображение сохраняется как Blob, избегая больших строк 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.