[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'); } }); } ~~~