[Web Chart系列之六] canvas Chart 導出圖文件 · Web Chart

### 介紹使用SVG繪制的圖形可以導出為svg 格式的文件，使用瀏覽器等可以查看。是否可以導出為png, gif 格式的文件呢？當然是可以。只是在 web 直接創建和操作文件是不建議的，而且存在各瀏覽器兼容的問題，比如IE使用ActiveX來創建新文件。正確的做法，是在web server 端傳送文件到web 端，不過對于web chart 來說，好像又多繞了一圈。這里的介紹為了簡單，沒有引入web Server. 既然使用的是Canvas,則本文的內容是針對支持HTML5的瀏覽器而言的。 ### Canvas 產生圖，并自動下載 ~~~  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Author" CONTENT="oscar999"> </HEAD> <BODY> <canvas id="myCanvas" width="400" height="300"></canvas> <script type="text/javascript"> var canvas = document.getElementById('myCanvas'); var ctx = document.getElementById('myCanvas').getContext('2d'); ctx.fillStyle = "red"; ctx.beginPath(); ctx.moveTo(30, 30); ctx.lineTo(150, 150); // was: ctx.quadraticCurveTo(60, 70, 70, 150); which is wrong. ctx.bezierCurveTo(60, 70, 60, 70, 70, 150); // <- this is right formula for the image on the right -> ctx.lineTo(30, 30); ctx.fill(); var dataURL = canvas.toDataURL(); dataURL = dataURL.replace("image/png", "image/octet-stream"); window.location.href = dataURL; </script> </BODY> </HTML> ~~~ 從canvas得到URL, 使用window.location.href下載image, 下載的文件名無法設置，需要更改成.png 或是 .gif 就可以查看了。 ### 利用image 的src ~~~  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Author" CONTENT="oscar999"> </HEAD> <BODY> <img id="canvasImg" alt="Right click to save me!"> <canvas id="myCanvas" width="400" height="300"></canvas> <script type="text/javascript"> var canvas = document.getElementById('myCanvas'); var ctx = document.getElementById('myCanvas').getContext('2d'); ctx.fillStyle = "red"; ctx.beginPath(); ctx.moveTo(30, 30); ctx.lineTo(150, 150); // was: ctx.quadraticCurveTo(60, 70, 70, 150); which is wrong. ctx.bezierCurveTo(60, 70, 60, 70, 70, 150); // <- this is right formula for the image on the right -> ctx.lineTo(30, 30); ctx.fill(); var dataURL = canvas.toDataURL(); document.getElementById("canvasImg").src = dataURL; </script> </BODY> </HTML> ~~~ 圖產生出來了，可以下載的方式就可以自由發揮了。 **利用library ** 目前已經有現成的libray 可以使用。 ~~~ Canvas2Image.saveAsImage(canvasObj, width, height, type) Canvas2Image.saveAsPNG(canvasObj, width, height) Canvas2Image.saveAsJPEG(canvasObj, width, height) Canvas2Image.saveAsGIF(canvasObj, width, height) Canvas2Image.saveAsBMP(canvasObj, width, height) Canvas2Image.convertToImage(canvasObj, width, height, type) Canvas2Image.convertToPNG(canvasObj, widht, height) Canvas2Image.convertToJPEG(canvasObj, widht, height) Canvas2Image.convertToGIF(canvasObj, widht, height) Canvas2Image.convertToBMP(canvasObj, widht, height) ~~~ 下載地址： https://github.com/hongru/canvas2image 保存及轉換圖片，很方便隨便列一下，如果傳遞到后端，如何處理，使用Ajax 方式： ~~~ for (var i = 0; i < 360; i++) { var data = _canvas.toDataURL(); //刪除字符串前的提示信息 "data:image/png;base64," var b64 = data.substring(22); $.ajax({ url: "RotateCanvas.aspx", data: { data: b64, name: i.toString() }, success: function () { //alert('OK'); } }); } ~~~