使用SVG绘制的图形可以导出为svg 格式的文件,使用浏览器等可以查看。
是否可以导出为png, gif 格式的文件呢? 当然是可以。
只是在 web 直接创建和操作文件是不建议的,而且存在各浏览器兼容的问题, 比如IE使用ActiveX来创建新文件。
正确的做法,是在web server 端传送文件到web 端, 不过对于web chart 来说, 好像又多绕了一圈。
这里的介绍为了简单,没有引入web Server.
既然使用的是Canvas,则本文的内容是针对支持HTML5的浏览器而言的。
New Document
New Document
图产生出来了, 可以下载的方式就可以自由发挥了。
利用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');
}
});
}