当你想要这样做的时候,你可以:
js直接操作保存 post back的保存 js直接操作保存 ms给出了官方方案,参考以下:
在本地保存 canvas 图像
demo地址
ie10上的效果还是不错的,其他ie版本并未测试。
令人遗憾的是,chrome等其他浏览器并不支持。
post back的保存 另外一种解决办法,就是取出canvas里的内容,post back回服务器,然后使用文件下载的方式保存图片到本地。
这样操作又回去了一趟服务器并且数据流量还不见得太小(当然对目前的网络速度和服务器配置来说还是小意思,除非真的很多很大),虽然的确不太好但是个人尚没有更好的解决方案。
如果不是需要编辑canvas内容(比如二维码之类的),而只是动态生成图片或者图片的样子来展示的,还可以直接使用服务器端的gd之类的编程生成内存图片展示到客户端(或者生成临时服务器文件,不需要的时候再删除)。
对比上面的做法,这种方式将图片的加工留在了服务器上,会对服务器的cpu使用显得更加高负。而在客户端生成的话,小小的发挥了分布式不是^_^
示例(asp.net mvc - razor):
@section scripts{ }
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); }}