先获取 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. 实时云渲染技术_如何助力VR虚拟现实走向成熟?

    近年来,虚拟现实(Virtual Reality, VR)技术在市场上的应用越来越广泛,虚拟现实已成为一个热门的科技话题.相关数据显示,2019年至2021年,我国虚拟现实市场规模不断扩大,从2019 ...

  2. CSS(选择器、字体属性、文本属性、三种引入方式)

    css简介 CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称. 有时我们也会称之为 CSS 样式表或级联样式表. CSS 是也是一种标记语言 CSS 主要用于设置 H ...

  3. Rust Rocket简单入门

    目录 简介 hello world 常用功能 动态路径 多个片段(segments) 静态文件服务器 简单WebAPI示例 添加依赖 实现接口 接口测试 参考链接 简介 Rust中最知名的两个web框 ...

  4. Python 潮流周刊第 43 期(摘要),赠书 5 本《Python数据结构与算法分析(第3版)》

    本周刊由 Python猫 出品,精心筛选国内外的 250+ 信息源,为你挑选最值得分享的文章.教程.开源项目.软件工具.播客和视频.热门话题等内容.愿景:帮助所有读者精进 Python 技术,并增长职 ...

  5. ChatGPT 指令大全

    1.写报告 报告开头 我现在正在 报告的情境与目的 .我的简报主题是 主题 ,请提供 数字 种开头方式,要简单到 目标族群 能听懂,同时要足够能吸引人,让他们愿意专心听下去. 我现在正在修台大的简报课 ...

  6. Android常用布局之LinearLayout线性布局和RealtiveLayout相对布局

    LinearLayout最常用的属性: id layout_width layout_height background 外边距:layout_margin:也是有好多方向 layout_margin ...

  7. C++设计模式 - 门面模式(Facade)

    接口隔离模式 在组件构建过程中,某些接口之间直接的依赖常常会带来很多问题.甚至根本无法实现.采用添加一层间接(稳定)接口,来隔离本来互相紧密关联的接口是一种常见的解决方案. 典型模式 Facade P ...

  8. #dp,模型转换,排列组合#AT1983 [AGC001E] BBQ Hard

    题目 有两个长度为\(n\)的序列\(a,b\),需要求 \[\sum_{i=1}^n\sum_{j=i+1}^nC(a_i+b_i+a_j+b_j,a_i+a_j) \] 其中\(n\leq 200 ...

  9. 深度剖析 Spring 框架在 Java 应用开发中的优势与应用

    Spring 是用于企业 Java 应用程序开发的最流行的应用程序开发框架.全球数百万开发人员使用 Spring Framework 创建高性能.易于测试和可重用的代码.Spring Framewor ...

  10. 上新啦KIT

    HMS Core上新啦!分析服务区服分析全新上线:机器学习服务OCR新增手写识别服务:3D建模续扫能力更新:视频编辑服务支持自定义上传素材--更多#HMS Core#能力可点击网页链接了解. 了解更多 ...