将html canvas里的图片保存到本地
2015-03-26 13:22
369 查看
当你想要这样做的时候,你可以:
js直接操作保存
post back的保存
在本地保存 canvas 图像
demo地址
IE10上的效果还是不错的,其他IE版本并未测试。
令人遗憾的是,chrome等其他浏览器并不支持。
这样操作又回去了一趟服务器并且数据流量还不见得太小(当然对目前的网络速度和服务器配置来说还是小意思,除非真的很多很大),虽然的确不太好但是个人尚没有更好的解决方案。
如果不是需要编辑canvas内容(比如二维码之类的),而只是动态生成图片或者图片的样子来展示的,还可以直接使用服务器端的GD之类的编程生成内存图片展示到客户端(或者生成临时服务器文件,不需要的时候再删除)。
对比上面的做法,这种方式将图片的加工留在了服务器上,会对服务器的cpu使用显得更加高负。而在客户端生成的话,小小的发挥了分布式不是^_^
示例(asp.net mvc - razor):
js直接操作保存
post back的保存
js直接操作保存
ms给出了官方方案,参考以下:在本地保存 canvas 图像
demo地址
IE10上的效果还是不错的,其他IE版本并未测试。
令人遗憾的是,chrome等其他浏览器并不支持。
post back的保存
另外一种解决办法,就是取出canvas里的内容,post back回服务器,然后使用文件下载的方式保存图片到本地。这样操作又回去了一趟服务器并且数据流量还不见得太小(当然对目前的网络速度和服务器配置来说还是小意思,除非真的很多很大),虽然的确不太好但是个人尚没有更好的解决方案。
如果不是需要编辑canvas内容(比如二维码之类的),而只是动态生成图片或者图片的样子来展示的,还可以直接使用服务器端的GD之类的编程生成内存图片展示到客户端(或者生成临时服务器文件,不需要的时候再删除)。
对比上面的做法,这种方式将图片的加工留在了服务器上,会对服务器的cpu使用显得更加高负。而在客户端生成的话,小小的发挥了分布式不是^_^
示例(asp.net mvc - razor):
<form method="post" action="../Download" target="_blank" style="display:none" id="form_download"> </form> @section scripts { <script type="text/javascript" src="~/Scripts/jquery.qrcode.min.js"></script> <script type="text/javascript" src="~/Scripts/qrcode.min.js"></script> <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 //任意内容 }); //$("#qrcode").qrcode("@ViewBag.url"); function saveAsLocalImage() { // 如果使用getElementById或者$("#qrcode")的方式,会报错说不支持toDataURL方法 var myCanvas = document.getElementsByTagName('canvas')[0]; var image = myCanvas.toDataURL("image/png"); // 这个form动态生成也行 var f = $('#form_download'); // 命名带上“1”是为了提醒以后可以做成多个的键值对 var name1 = $('<input name="name1" type="text" value="@Html.Raw(Model.Title)" />'); var val1 = $('<input name="val1" 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); } }
相关文章推荐
- js截图及绕过服务器图片保存至本地(html2canvas)
- HTML5+Canvas手机拍摄,本地压缩上传图片,案例实测报告。
- HTML5+Canvas手机拍摄,本地压缩上传图片
- Canvas保存图片保存到本地
- HTML5+Canvas手机拍摄,本地压缩上传图片,案例实测报告。
- HTML5+Canvas手机拍摄,本地压缩上传图片
- html2canvas把div保存图片高清图
- 如何运用html5 canvas将图片保存至手机本地的图库中?
- 【JavaScript】基于H5 canvas实现的画板绘图工具(类似你画我猜)——整合颜色选取、保存图片到本地功能
- html img 保存为本地图片 支持IE11 , Chrome 其他没有试过
- html2canvas插件对整个网页或者网页某一部分截图并保存为图片
- Canvas实现保存图片到本地
- js将html生成为图片,并保存在本地
- js实现canvas保存图片为png格式并下载到本地的方法
- 用html5的canvas生成图片并保存到本地
- html2canvas截取界面html并保存到本地
- JS/HTML 保存图片到本地:HTML <a> download 属性
- js小方法+Canvas 利用js 实现浏览器保存图片到本地
- H5使用Canvas模板设计签名并将图片保存到本地
- js实现将canvas保存成图片并下载到本地