转自https://segmentfault.com/a/1190000003853394

想要将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.segmentfault.com/" download>下载</a>

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

<a href="http://www.segmentfault.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”

canvas元素内容生成图片的更多相关文章

  1. canvas元素内容生成图像文件

    准备工作 想要将canvas元素当前显示的内容生成为图像文件,我们首先要获取canvas中的数据,在HTML5 <canvas>元素的标准中提供了toDataURL()的方法可以将canv ...

  2. 【高级功能】使用canvas元素(第一部分)

    1. 开始使用 canvas 元素 canvas 元素非常简单,这是指它所有的功能都体现在一个JavaScript对象上,因此该元素本身只有两个属性:width 和 height. canvas 元素 ...

  3. 【温故而知新-Javascript】使用canvas元素(第二部分)

    本文将继续介绍canvas的功能,展示如何绘制更复杂的图形(包括圆弧和曲线),如何使用剪裁区域来限制操作以及如何绘制文本.还是介绍可以应用在画布上的特效和变换,包括阴影.透明度.旋转和坐标重映射. 1 ...

  4. 【温故而知新-Javascript】使用canvas元素(第一部分)

    1. 开始使用 canvas 元素 canvas 元素非常简单,这是指它所有的功能都体现在一个JavaScript对象上,因此该元素本身只有两个属性:width 和 height. canvas 元素 ...

  5. 【高级功能】使用canvas元素(第二部分)

    本文将继续介绍canvas的功能,展示如何绘制更复杂的图形(包括圆弧和曲线),如何使用剪裁区域来限制操作以及如何绘制文本.还是介绍可以应用在画布上的特效和变换,包括阴影.透明度.旋转和坐标重映射. 1 ...

  6. canvas元素大小与绘图表面大小

    原文链接:canvas总结:元素大小与绘图表面大小 前言 我们使用canvas的时候一般在canvas元素中直接设置它的width和height: 1 <canvas id="myCa ...

  7. windows phone (25) Canvas元素B

    原文:windows phone (25) Canvas元素B  ZIndex 这也是一个附加属性,表示canvas的children集合内的子元素的显示顺序,在canvas中的元素默认情况下是后面的 ...

  8. windows phone (24) Canvas元素A

    原文:windows phone (24) Canvas元素A Canvas元素表示定制一个区域,并可以通过相对坐标定义子元素位置,在一下情况下Canvas是不可见的 Height 属性等于 0. W ...

  9. html2canvas将页面内容生成图片

    html2canvas官网链接地址:https://html2canvas.hertzen.com/ <!doctype html> <html lang="en" ...

随机推荐

  1. 【bzoj3387-跨栏训练】线段树+dp

    我们可以想到一个dp方程:f[i][0]表示当前在i个栅栏的左端点,f[i][1]表示在右端点. 分两种情况: 第一种:假设现在要更新线段gh的左端点g,而它下来的路径被ef挡住了,那么必定是有ef来 ...

  2. 【BZOJ】1486 [HNOI2009]最小圈

    [算法]二分+spfa [题解]据说这个叫分数规划? 0-1分数规划 二分答案a,则对于任意的环有w/k≤a即w-ak≤0,若满足条件则a变小,否则a变大. 因为w=w1+w2+...+wk,所以变形 ...

  3. 【洛谷 P4320】 道路相遇 (圆方树,LCA)

    题目链接 题意:给一张无向图和\(M\)个询问,问\(u,v\)之间的路径的必经之点的个数. 对图建出圆方树,然后必经之点就是两点路径经过的原点个数,用\((dep[u]+dep[v]-dep[LCA ...

  4. 深入理解javascript原型和闭包(2)——函数与对象的关系

    上文(理解javascript原型和作用域系列(1)——一切都是对象)已经提到,函数就是对象的一种,因为通过instanceof函数可以判断. var fn = function () { }; co ...

  5. new操作符(翻译自mozilla.org)

    翻译自:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new new操作符可以实例化一个用户自 ...

  6. js 验证ip列表

    如题. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title ...

  7. sicily 数据结构 1014. Translation

    Description You have just moved from Waterloo to a big city. The people here speak an incomprehensib ...

  8. springmvc中输出字符串

    /** * 输出文字 * @param response * @param s */ public static void responseOut(HttpServletResponse respon ...

  9. jq监听ajax执行开始,出错,结束。

    $(“#msg”).ajaxComplete(function(event,request, settings){   $(this).append(“<li>请求完成.</li&g ...

  10. mybatis 一级缓存和二级缓存

    1.默认是会话期内 一级session缓存 2.二级缓存: 引入二级缓存的jar, 配置 ehcache.xml, mapper.xml引入缓存<cache type="org.myb ...