【已知】
canvas 提供了 toDataURL 的接口,可以方便的将 canvas 画布转化成 base64 编码的 image。目前支持的最好的是 png 格式,jpeg 格式的现代浏览器基本也支持,但是支持的不是很好。

【想要的】
往往这么简单直接的接口通常都满足不了需求。我想要的不仅是简单的通过画布生成一个 png,我不想新开一个 tab,然后还要右键另存为...

我还需要更方便的自由的配置生成的图片的大小,比例等。

另外如果我还要别的图片格式,比如位图 bmp,gif 等怎么办...

【解决办法】
a) 想直接把图片生成后 download 到本地,其实办法也很简单。直接改图片的 mimeType,强制改成 steam 流类型的。比如 ‘image/octet-stream’,浏览器就会自动帮我们另存为..

b) 图片大小,及比例的可控倒也好办,我们新建一个我们想要大小的 canvas,把之前的 canvas 画布重新按照所要的比例,及大小 draw 到新的 canvas 上,然后用新的 canvas 来 toDataURL 即可。

c) 想要 bmp 位图会麻烦些... 没有直接的接口,需要我们自己来生成。生成图片的响应头和响应体有一定的规则,略显麻烦。不过还能接受。剩下的就是性能问题,按像素级别来操作,对于一个大图来说计算量很有压力。
【实现】

【Demo】
http://hongru.github.com/proj/canvas2image/index.html
可以试着在 canvas 上涂涂画画,然后保存看看。如果用 bmp 格式的话,需要支持 btoa 的 base64 编码,关于 base64 编码规则可看上一篇博文

【不完美的地方】
1)jpeg 接口本身就不完善,当 canvas 没有填充颜色或图片时,保存的 jpeg 由于是直接由 png 的 alpha 通道强制转换过来的,所以在 png 的透明部分在 jpeg 里面就是黑色的。

2)gif 的限制太多。且可用性不大,有 png 就够了

3)bmp 位图生成,计算量稍显大了。

4)由于是强制改 mimeType 来实现的自动下载,所以下载的时候文件类型不会自动识别。

本文也同步发表到博主另一个 blog

原创文章转载请注明:

转载自AlloyTeam:http://www.alloyteam.com/2012/02/canvas%e4%bf%9d%e5%ad%98%e4%b8%badataimage%e6%89%a9%e5%b1%95%e5%8a%9f%e8%83%bd%e7%9a%84%e5%ae%9e%e7%8e%b0/

  1. Canvas 中写文字,转换图片,并下载 | 众生相 2014 年 2 月 28 日

    […] 扩展:canvas 保存为 dataimage 扩展功能的实现 […]

  2. yanhaijing 2013 年 10 月 25 日

    下载的文件没有扩展名啊,打开的时候还要选择,这个有没有办法解决

  3. yanhaijing 2013 年 10 月 24 日

    这个我要支持下,我正需要这个功能

发表评论到 Canvas 中写文字,转换图片,并下载 | 众生相