Web Chart 入門（6）：Canvas 圖表導出為圖片文件

導出需求背景

SVG 圖表易導出為 .svg 文件，Canvas 繪製的圖表能否導出為 PNG/GIF 等位圖格式？答案是肯定的。本文介紹幾種純前端導出方案。

方案一：toDataURL + window.location.href 自動下載

<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// 繪製示例圖形
ctx.fillStyle = "red";
ctx.beginPath();
ctx.moveTo(30, 30);
ctx.lineTo(150, 150);
ctx.bezierCurveTo(60, 70, 60, 70, 70, 150);
ctx.lineTo(30, 30);
ctx.fill();

// 導出下載
var dataURL = canvas.toDataURL();           // 默認 image/png
dataURL = dataURL.replace("image/png", "image/octet-stream");
window.location.href = dataURL;             // 觸發下載
</script>

缺點：下載文件名不可控，需手動改後綴為 .png/.gif。

方案二：toDataURL + Image 對象預覽/另存為

<img id="canvasImg" alt="Right click to save me!">
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
// ... 繪製代碼同前 ...
var dataURL = canvas.toDataURL();
document.getElementById("canvasImg").src = dataURL; // 顯示在 img 標簽，用戶右鍵保存
</script>

方案三：使用 Canvas2Image 庫（推薦）

GitHub：https://github.com/hongru/canvas2image

提供豐富 API：

Canvas2Image.saveAsPNG(canvas, width, height);
Canvas2Image.saveAsJPEG(canvas, width, height);
Canvas2Image.saveAsGIF(canvas, width, height);
Canvas2Image.saveAsBMP(canvas, width, height);
// 也可僅轉換為 Image 對象不下載
Canvas2Image.convertToPNG(canvas, width, height);

進階：上傳至服務端（AJAX）

var data = canvas.toDataURL();           // "data:image/png;base64,..."
var b64 = data.substring(22);            // 去掉 "data:image/png;base64,"
$.ajax({
    url: "RotateCanvas.aspx",
    data: { data: b64, name: "myChart.png" },
    success: function() { console.log('上傳成功'); }
});

服務端接收 Base64 字符串解碼存檔，解決瀏覽器兼容性與文件名控制問題。

總結建議

• 簡單演示：方案一/二即可。
• 生產項目：推薦 Canvas2Image 庫，或方案三上傳服務端統一管理。
• 注意：toDataURL() 受同源策略限制，Canvas 若包含跨域圖片會導致「污染」無法導出，需設置 crossOrigin="anonymous" 並確保服務端支持 CORS。