先获取 canvas 节点,使用 toDataURL 转为 image 数据,最后使用 a 链接下载。

// Trans to image
const canvas = document.getElementsByTagName('canvas')[0]
const link = canvas.toDataURL('image/png')
const filename = 'xxx' // Download
let oA = document.createElement('a');
oA.download = filename // 设置下载的文件名,默认是'下载'
oA.href = link;
document.body.appendChild(oA);
oA.click();
oA.remove();

以上代码可以直接使用。

Other:什么是Canvas

Refer:在线Qrcode

Link:https://www.cnblogs.com/farwish/p/15426593.html

[FE] Canvas 转图片并下载的方式的更多相关文章

  1. 前端canvas合并图片两种实现方式

    ---恢复内容开始--- 需求: 有一个固定的背景图,还有一个是随机生成的二维码,合并成一张图,让用户下载. 实现一:纯手写,这里为了省事生成图片我直接给的base64,其实使用qrcode.js生成 ...

  2. Canvas 实现图片合成并下载合成图片

    现在经常会遇到那种带二维码的推广图片,如下图所示: 1是整张推广图的背景,2是二维码.这种图片的背景是保持不变的,里面的二维码是变化的.所以我们需要把二维码单独生成然后与背景合并. 我们可以通过can ...

  3. 神奇的canvas——巧用 canvas 为图片添加水印

    代码地址如下:http://www.demodashi.com/demo/11637.html 很久之前写过一篇关于 canvas 的文章,是通过 canvas 来实现一个绚丽的动画效果,不管看过没看 ...

  4. Android 解决图片大量下载:软引用必须懂4点

    1.对象的强.软.弱和虚引用为了能更加灵活控制对象的生命周期,需要知道对象引用的4中级别,由高到低依次为 :强引用.软引用.弱引用和虚引用 备注: 这四种的区别: ⑴强引用(StrongReferen ...

  5. iOS UIImage DownLoad图片的下载缓存全部在此

    iOS图片的下载缓存全部在此 分类: iOS编程 -- : 2075人阅读 评论() 收藏 举报 注意: 我的文章只写给自己看 ------------------------------------ ...

  6. 利用canvas 导出图片

    1.使用canvas绘制图片,并将图片导出. 在本地直接访问静态网页时,无法使用toDataURL(),需要将网页发布后,canvas才能使用toDataURL获取画布上的内容.因为canvas不允许 ...

  7. [JavaScript] canvas 合成图片和文字

    Canvas Canvas 是 HTML5 新增的组件,就像一个画板,用 js 这杆笔,在上面乱涂乱画 创建一个 canvas <canvas id="stockGraph" ...

  8. canvas转图片

    <script>   var canvas, context2D, canvasimg, context2Dimg ,fontSize = 100;       window.onload ...

  9. 使用FormData数据做图片上传: new FormData() canvas实现图片压缩

    使用FormData数据做图片上传: new FormData()       canvas实现图片压缩 ps: 千万要使用append不要用set   苹果ios有兼容问题导致数据获取不到,需要后台 ...

  10. Node.js 4493图片批量下载爬虫1.00

    这个爬虫依然需要iconv转码,想不到如今非utf8的网页还这么多.另外此网页找下一页的方式比较异常,又再次借助了正则表达式. 代码如下: //============================ ...

随机推荐

  1. Java valueOf() 方法---->摘抄

    valueOf(boolean b): 返回 boolean 参数的字符串表示形式.. valueOf(char c): 返回 char 参数的字符串表示形式. valueOf(char[] data ...

  2. WinAppSDK / WinUI3 项目无法使用 SystemEvents 的问题

    SystemEvents 是一个开发 win32 窗口项目很常用的类,其中封装了一些常用的系统广播消息.在 WinUI3 项目中,SystemEvents 事件经常无法触发,简单排查了一下原因. Sy ...

  3. 替换Spring容器中已经存在的Bean

    一.背景 我们在开发的过程中,经常会引入别人写的jar包实现某些功能.而别人的jar包一般都自动注入Spring容器中,假设别人都是通过@Bean或@Component注入的,并且没有加入@Condi ...

  4. C++设计模式 - 模板方法(Template Method)

    组件协作模式: 现代软件专业分工之后的第一个结果是"框架与应用程序的划分","组件协作"模式通过晚期绑定,来实现框架与应用程序之间的松耦合,是二者之间协作时常用 ...

  5. #树形dp,二次扫描换根法#JZOJ 3501 消息传递 with others

    目录 JZOJ 3501 消息传递 题目 分析 代码 简单写就能跳过之题目 JZOJ 3500 物语 题目 分析 代码 JZOJ 3757 洛谷 2354 [NOI 2014] 随机数产生器 题目 分 ...

  6. GitHub/GitLab 为不同的项目修改提交名字 user.name 和邮箱 user.email(附:批量处理脚本)

    背景 大疫情的背景下,家里的电脑需要同时支撑自己和公司的项目,根据 GitHub/GitLab 网站的提交记录上看,其是根据邮箱来辨识用户的,所以有必要分别针对不同的项目设置不同的 Git 名字(us ...

  7. Jetty的https模块

    启用https模块,执行如下命令: java -jar $JETTY_HOME/start.jar --add-modules=https 命令的输出,如下: INFO : https initial ...

  8. 战码先锋直播预告丨参与文档贡献,开启OpenHarmony社区贡献之旅

    OpenAtom OpenHarmony(以下简称"OpenHarmony")工作委员会首度发起「OpenHarmony开源贡献者计划」(本期OpenHarmony开源贡献者计划以 ...

  9. 成长计划校园极客秀|基于OpenHarmony的智能阳台

    前言 本文由OpenAtom OpenHarmony(以下简称"OpenHarmony")开源开发者成长计划活动的参与者李建涛提供,详细阐述了由搭载OpenHarmony系统的拓维 ...

  10. [易语言软件开源] [分享源码] 易语言D2D实现彩虹跑马灯

    注意使用了D2D1.1,部分win7用户可能用不了(win7以下也用不了) 不是单纯的一个彩虹条,是可以变幻的 其实也可以封装成GDI+的,但是GDI+占用比较大,就没有用 点击下载点击下载