SwQrcodeGenerator
SwQrcodeGenerator 將文字編碼為二維碼並渲染到 <canvas>。任意 prop 變化時自動重繪，支援自訂顏色、容錯級別和邊距。提供 download() 與 toDataURL() 方法，兼容桌面瀏覽器下載和行動端長按儲存兩種場景。
基礎用法
傳入 value 即可生成二維碼；修改 value 時自動重繪（響應式）。
基礎用法
加载中...
自訂顏色
透過 foreground（前景/深色，預設 #000000ff）和 background（背景/淺色，預設 #ffffffff）自訂二維碼顏色。顏色格式為 RRGGBBAA（含 Alpha）。
自訂顏色
加载中...
容錯級別
透過 errorCorrectionLevel 設定容錯能力：L（~7%）、M（~15%，預設）、Q（~25%）、H（~30%）。
容錯級別
加载中...
margin + width 組合
加载中...
下載與匯出
透過 ref 呼叫 download() 觸發瀏覽器下載；行動端不支援時應改用 toDataURL() 顯示圖片供用戶長按儲存。
下載與匯出
加载中...
Props
| 名稱 | 類型 | 必填 | 預設值 | 說明 |
|---|---|---|---|---|
value | string | ✅ | — | 待編碼文字；任意變化均觸發重繪 |
width | number | ❌ | 200 | 二維碼像素寬度（正方形） |
foreground | string | ❌ | '#000000ff' | 前景色（深色），格式 RRGGBBAA |
background | string | ❌ | '#ffffffff' | 背景色（淺色），格式 RRGGBBAA |
errorCorrectionLevel | 'L' | 'M' | 'Q' | 'H' | ❌ | 'M' | 容錯級別；嵌入 logo 建議使用 'H' |
margin | number | ❌ | 4 | 四周空白格數 |
downloadFilename | string | ❌ | '' | download() 使用的檔案名稱；留空則用 qrcode-{timestamp}.png |
Events
| 事件名 | Payload | 觸發時機 |
|---|---|---|
ready | — | Canvas 渲染完成 |
error | { message: string } | QRCode.toCanvas 拋錯 |
Exposed Methods
| 方法 | 回傳值 | 說明 |
|---|---|---|
download() | Promise<void> | 觸發瀏覽器下載 PNG；行動端不支援時 reject Error('MOBILE_LONG_PRESS') |
toDataURL() | string | null | 回傳 data:image/png;base64,...，適合行動端 <img :src> 長按儲存 |
注意事項
- 顏色格式：
foreground/background均為RRGGBBAA8 位十六進位，最後兩位為 Alpha（ff= 完全不透明）。若使用 CSScolor-picker只能拿到 6 位，需手動補ff。 - 響應式重繪：
value、width、foreground、background、errorCorrectionLevel、margin任意變化均觸發重繪，無需手動呼叫reset。 - 行動端下載相容：微信內建瀏覽器、部分 Android WebView 等不支援
<a download>，download()會 rejectMOBILE_LONG_PRESS，應在 catch 中改用toDataURL()展示圖片。