Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

把Canvas中的数据下载到本地

  这几天贴吧有好几个帖子都是问关于下载的,咱也来说说这个下载的问题。在前端就可以下载文件吗?在几年前这是完全不可能的事情,但是HTML5的渐渐普及,原来不可能的东西都被逐个击破了。现在咱就来说说如何把Canvas里的图像数据下载到本地。
  首先要很遗憾的说一声,IE不支持←_←。因为IE不支持直接在地址栏使用数据URL,这个方法是基于数据URL的。其他浏览器都支持下载,但是还是有问题,因为除了Chrome之外,其他浏览器无法指定下载的文件名(做Chrome Only的程序这绝对是个好方法)。因为设置文件名需要A标签的download属性,只有Chrome完美兼容它。火狐虽然兼容,但是从火狐20开始,可能由于安全性原因对这个属性做了一些限制。目前火狐的download属性使用同源策略(same origin policy)这样就无法对数据URL指定文件名了。
  其实,数据URL本身没有强调“下载”,我们使用一个投机取巧的办法让浏览器对这个资源下载,那就是修改这个数据URL的数据类型。本来从Canvas中直接用toDataURL方法得到的是PNG图片的数据URL,如果直接用A标签连接它会变成直接用浏览器查看这个图片。现在我们把这个类型修改该成字节流(octet-stream),由于浏览器不识别字节流,所以会提示用户下载。下面是代码。 <canvas id="canvas" width="140" heght="140"></canvas>
<br/><a href="JavaScript:" id="download">下载此图像</a>
<script>
//绘图
var g=canvas.getContext("2d");
g.fillStyle="rgba(128,0,0,0.5)";
g.fillRect(0,0,100,100);
g.fillStyle="rgba(0,128,0,0.5)";
g.fillRect(20,20,100,100);
g.fillStyle="rgba(0,0,128,0.5)";
g.fillRect(40,40,100,100);
//下载
download.onmousedown=function(){
  this.download="Canvas图像.png"; //仅Chrome支持设置文件名
  this.href=canvas.toDataURL().replace("png","octet-stream");
};
</script>
网名:
54.144.24.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^