[Web Chart系列之6] canvas Chart 导出图文件 _Web前端

[Web Chart系列之六] canvas Chart 导出图文件

介绍

使用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');
			}
	});
}