以下哪些可以成为html⽂件的扩展名_canvas元素内容⽣成图
像⽂件
准备⼯作
想要将canvas元素当前显⽰的内容⽣成为图像⽂件，我们⾸先要获取canvas中的数据，在HTML5 <canvas>元素的标准中提供
了toDataURL()的⽅法可以将canvas中的内容⽣成为指定格式的DataURL，使⽤⽅法如下:
// 假设有⼀个id为cvs的canvas元素
var dataurl = ElementById('cvs').toDataURL('image/png');
我们现在需要将DataURL⽣成为⼀个png类型的图像⽂件，并且这个操作是在本地完成的，不需要服务器帮助⽣成⽂件。以下提供两种⽅法：
⽅法⼀利⽤HTML5 <a>标签的download属性
在HTML5标准中，<a>标签拥有⼀个新的属性download，download属性⽤来指明该超链接指向的⽬标是应该被下载的⽂件，例如
<a href="www.segmentfault/" download>下载</a>
chrome直接下载
download属性可以被赋值，⽤来指明下载⽂件的名称，例如
<a href="www.segmentfault/" download="index.html">下载</a>
⽰例
现在，我们可以通过将DataURL赋值给a标签的href属性，并且使⽤download属性使其转变为可下载的图⽚。
var dataurl = ElementById('cvs').toDataURL('image/png');
var a = ateElement('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 = ElementById('cvs').toDataURL('image/png').replace("image/png", "image/octet-stream");
var tmpa = ateElement('a');
a.href = dataurl;
a.target = "_blank";
a.click();
兼容性
这个⽅法对于⼤部分主流浏览器都可⽤，但是octet-stream并不包含⽂件名和扩展名的信息，所以使⽤这个⽅法下载下来的⽂件是没有扩展名的⽂件，浏览器可能默认的命名为“下载”或者“unknown”
以上查阅资料可以获得，⽅法⼀：注：触发a标签可以如果⾥⾯没内容的话⽆反应，可以在a标签⾥⾯放个button然后js触发button间接就出发到a标签

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。