ICEN UI

导出 PNG

handle.toDataURL({ scale })（默认 2x）：SVG 序列化（补 xmlns/宽高）→ Image 载入 → canvas 光栅化 → PNG dataURL，按渲染内容缓存（同 scale 再次调用即时返回）。

导出当前折线为 PNG（2x 光栅化）——真实浏览器中第二次取值即得 dataURL

…

html
<p class="demo-label" style="margin:0 0 10px">导出当前折线为 PNG（2x 光栅化）——真实浏览器中第二次取值即得 dataURL</p><div class="icen-toolbar" style="margin:0 0 10px">  <button class="icen-btn icen-btn-sm icen-btn-primary" type="button" id="charts-export-btn">导出 PNG</button></div><div class="icen-chart" id="demo-charts-export" style="border:1px solid var(--icen-token-line-soft);border-radius:var(--icen-radius-md);padding:12px"></div><p class="demo-label" id="charts-export-status" style="margin-top:8px">…</p>
行为与接口说明

handle.toDataURL({ scale })（默认 2x）：SVG 序列化（补 xmlns/宽高）→ Image 载入 → canvas 光栅化 → PNG dataURL，按渲染内容缓存（同 scale 再次调用即时返回）。诚实不抛：SSR/无 canvas 环境、纯 DOM 图型（vbar 等根下无 SVG）返回 undefined；SVG→Image 异步——首次调用触发绘制返回 undefined，完成后（或下帧）同 scale 再取。典型接法：点「导出」→ 首调 undefined → rAF/setTimeout 后再取 → a[download] 落盘。

安装

bun add @icen.ai/ui

用法

js
const handle = renderChart(el, { type: 'line', labels, values });btn.addEventListener('click', () => {  const first = handle.toDataURL?.({ scale: 2 });   // 首次：触发光栅化，可能 undefined（诚实）  setTimeout(() => {    const url = handle.toDataURL?.({ scale: 2 });   // 缓存命中：PNG dataURL    if (!url) return;                                 // 无 canvas / 纯 DOM 图型：undefined 不抛    const a = document.createElement('a');    a.href = url;    a.download = 'chart.png';    a.click();  }, 60);});