当你想要这样做的时候，你可以：
js直接操作保存post back的保存js直接操作保存
ms给出了官方方案，参考以下： 在本地保存 canvas 图像 demo地址
IE10上的效果还是不错的，其他IE版本并未测试。 令人遗憾的是，chrome等其他浏览器并不支持。
post back的保存
另外一种解决办法，就是取出canvas里的内容，post back回服务器，然后使用文件下载的方式保存图片到本地。
这样操作又回去了一趟服务器并且数据流量还不见得太小（当然对目前的网络速度和服务器配置来说还是小意思，除非真的很多很大），虽然的确不太好但是个人尚没有更好的解决方案。
如果不是需要编辑canvas内容（比如二维码之类的），而只是动态生成图片或者图片的样子来展示的，还可以直接使用服务器端的GD之类的编程生成内存图片展示到客户端（或者生成临时服务器文件，不需要的时候再删除）。 对比上面的做法，这种方式将图片的加工留在了服务器上，会对服务器的cpu使用显得更加高负。而在客户端生成的话，，小小的发挥了分布式不是^_^
示例(asp.net mvc – razor)：
==>@section scripts{=>=><script type=”text/javascript”>var url = “@Html.Raw(Url.Action(“CheckTicket”, “MeetingCenter”, new { area = “wxfuns”, id = Model.Id }).EncodeUrlWithOauth(Model.WxAcct.AppId))”;$(“#qrcode”).qrcode({//render: “canvas”, //table|canvas方式width: 400, //宽度height: 400, //高度text: url //任意内容});{// 如果使用getElementById或者$(“#qrcode”)的方式，会报错说不支持toDataURL方法var myCanvas = document.getElementsByTagName(‘canvas’)[0];var image = myCanvas.toDataURL(“image/png”);// 这个form动态生成也行var f = $(‘#form_download’);// 命名带上“1”是为了提醒以后可以做成多个的键值对var name1 = $(‘<input type=”text” value=”@Html.Raw(Model.Title)” />’);var val1 = $(‘<input type=”text” value=”‘ + image + ‘” />’);name1.appendTo(f);val1.appendTo(f);f.submit();// 因为这个f不是动态生成的，需要清空这个form，否则第二次提交就有问题了。f.html(“”);}</script>}public ActionResult Download(FormCollection collection){try{// 一样的，命名带上“1”是为了提醒以后可以做成多个的键值对string name1 = collection[“name1”];string val1 = collection[“val1”];if (string.IsNullOrEmpty(name1) || string.IsNullOrEmpty(val1) || (val1.StartsWith(“data:image/png;base64”) == false)){return new EmptyResult();}var base64 = val1.Substring(22);byte[] bytes = Convert.FromBase64String(base64);MemoryStream memStream = new MemoryStream(bytes);return File(memStream, “application/octet-stream”, Server.UrlEncode(name1 + “.png”));}catch (Exception ex){return Content(ex.Message);}}
可以一个人，可以几个人，一起放松那劳累的心情或者劳累自己的身体，
