程式師世界 >> 編程語言 >> JAVA編程 >> 關於JAVA >> Web Chart入門（6） canvas Chart 導出圖文件

Web Chart入門（6） canvas Chart 導出圖文件

編輯：關於JAVA

介紹

使用SVG繪制的圖形可以導出為svg 格式的文件，使用浏覽器等可以查看。

是否可以導出為png, gif 格式的文件呢？當然是可以。

只是在 web 直接創建和操作文件是不建議的，而且存在各浏覽器兼容的問題，比如IE使用ActiveX來創建新文件。

正確的做法，是在web server 端傳送文件到web 端，不過對於web chart 來說，好像又多繞了一圈。

這裡的介紹為了簡單，沒有引入web Server.

既然使用的是Canvas,則本文的內容是針對支持HTML5的浏覽器而言的。

Canvas 產生圖，並自動下載

<!--Add by oscar999-->
<!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

<!--Add by oscar999-->
<!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');  
            }  
    });  
}