canvas元素内容生成图像文件

准备工作

想要将canvas元素当前显示的内容生成为图像文件,我们首先要获取canvas中的数据,在HTML5 <canvas>元素的标准中提供了toDataURL()的方法可以将canvas中的内容生成为指定格式的DataURL,使用方法如下:

// 假设有一个id为cvs的canvas元素
var dataurl = document.getElementById('cvs').toDataURL('image/png');

我们现在需要将DataURL生成为一个png类型的图像文件,并且这个操作是在本地完成的,不需要服务器帮助生成文件。以下提供两种方法:

方法一 利用HTML5 <a>标签的download属性

在HTML5标准中,<a>标签拥有一个新的属性download,download属性用来指明该超链接指向的目标是应该被下载的文件,例如

<a href="http://www.jianshu.com" download>下载</a>

download属性可以被赋值,用来指明下载文件的名称,例如

<a href="http://www.jianshu.com" download="index.html">下载</a>

示例

现在,我们可以通过将DataURL赋值给a标签的href属性,并且使用download属性使其转变为可下载的图片。

var dataurl = document.getElementById('cvs').toDataURL('image/png');
var a = document.createElement('a');
a.href = dataurl;
a.download = "sample";
a.click();

兼容性

目前只有Chrome和FireFox支持download属性

方法二 修改DataURL的Mime-type

如果我们直接将获得的DataURL赋值给a标签的href属性,在点击链接后浏览器只会在新窗口打开图片,并不会直接执行下载。我们可以修改DataURL的Mime-type为octet-stream,强制让浏览器下载。

示例

var dataurl = document.getElementById('cvs').toDataURL('image/png').replace("image/png", "image/octet-stream");
var tmpa = document.createElement('a');
a.href = dataurl;
a.target = "_blank";
a.click();

兼容性

这个方法对于大部分主流浏览器都可用,但是octet-stream并不包含文件名和扩展名的信息,所以使用这个方法下载下来的文件是没有扩展名的文件,浏览器可能默认的命名为“下载”或者“unknown”

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,891评论 18 139
  • 国家电网公司企业标准(Q/GDW)- 面向对象的用电信息数据交换协议 - 报批稿:20170802 前言: 排版 ...
    庭说阅读 11,135评论 6 13
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,179评论 25 708
  • 今晚上夜班,吃完饭打电话给家里,女儿告诉我她们明天过六一,让我下班赶快去,我说妈妈知道了,看到你柴老师发的信息了,...
    海浪花_2642阅读 116评论 0 1
  • 喜欢一个人,也需要勇气。 “别傻了,他不可能喜欢你,他有喜欢的女孩了。”闺蜜如是说。 虽然早已知道真相,但听到别人...
    等猫的狗阅读 452评论 0 2