[FE] Canvas 转图片并下载的方式

先获取 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 转图片并下载的方式的更多相关文章
- 前端canvas合并图片两种实现方式
---恢复内容开始--- 需求: 有一个固定的背景图,还有一个是随机生成的二维码,合并成一张图,让用户下载. 实现一:纯手写,这里为了省事生成图片我直接给的base64,其实使用qrcode.js生成 ...
- Canvas 实现图片合成并下载合成图片
现在经常会遇到那种带二维码的推广图片,如下图所示: 1是整张推广图的背景,2是二维码.这种图片的背景是保持不变的,里面的二维码是变化的.所以我们需要把二维码单独生成然后与背景合并. 我们可以通过can ...
- 神奇的canvas——巧用 canvas 为图片添加水印
代码地址如下:http://www.demodashi.com/demo/11637.html 很久之前写过一篇关于 canvas 的文章,是通过 canvas 来实现一个绚丽的动画效果,不管看过没看 ...
- Android 解决图片大量下载:软引用必须懂4点
1.对象的强.软.弱和虚引用为了能更加灵活控制对象的生命周期,需要知道对象引用的4中级别,由高到低依次为 :强引用.软引用.弱引用和虚引用 备注: 这四种的区别: ⑴强引用(StrongReferen ...
- iOS UIImage DownLoad图片的下载缓存全部在此
iOS图片的下载缓存全部在此 分类: iOS编程 -- : 2075人阅读 评论() 收藏 举报 注意: 我的文章只写给自己看 ------------------------------------ ...
- 利用canvas 导出图片
1.使用canvas绘制图片,并将图片导出. 在本地直接访问静态网页时,无法使用toDataURL(),需要将网页发布后,canvas才能使用toDataURL获取画布上的内容.因为canvas不允许 ...
- [JavaScript] canvas 合成图片和文字
Canvas Canvas 是 HTML5 新增的组件,就像一个画板,用 js 这杆笔,在上面乱涂乱画 创建一个 canvas <canvas id="stockGraph" ...
- canvas转图片
<script> var canvas, context2D, canvasimg, context2Dimg ,fontSize = 100; window.onload ...
- 使用FormData数据做图片上传: new FormData() canvas实现图片压缩
使用FormData数据做图片上传: new FormData() canvas实现图片压缩 ps: 千万要使用append不要用set 苹果ios有兼容问题导致数据获取不到,需要后台 ...
- Node.js 4493图片批量下载爬虫1.00
这个爬虫依然需要iconv转码,想不到如今非utf8的网页还这么多.另外此网页找下一页的方式比较异常,又再次借助了正则表达式. 代码如下: //============================ ...
随机推荐
- java方法的内存及练习
方法的内存 一.方法调用的基本内存原理: Java内存分配 栈: 方法运行时使用的内存方法进栈运行,运行完毕就出栈 堆: newl出来的,都在堆内存中开辟了一个小空间 方法区: 存储可以运行的clas ...
- github 镜像地址
亲测可用的 github 镜像地址: https://hub.nuaa.cf , https://hub.fgit.cf
- Python爬虫实战系列4:天眼查公司工商信息采集
Python爬虫实战系列1:博客园cnblogs热门新闻采集 Python爬虫实战系列2:虎嗅网24小时热门新闻采集 Python爬虫实战系列3:今日BBNews编程新闻采集 Python爬虫实战系列 ...
- [前端原生技术]jsonp
[版权声明]未经博主同意,谢绝转载!(请尊重原创,博主保留追究权)https://www.cnblogs.com/cnb-yuchen/p/18031965出自[进步*于辰的博客] 在学习了Jsoup ...
- execute immediate 用法小结
1.常规用法 v_sql varchar2(1000); v_sql := 'update Test set name= ''lw112190'' where id= 1'; execute imme ...
- 学习笔记-安装kafka集群
官网地址:https://kafka.apache.org/ 1.下载解压 #下载 wget https://mirror.bit.edu.cn/apache/kafka/2.6.0/kafka_2. ...
- 使用小皮面板新建站点配置SSL证书
1.新建站点 2,点开配置->SSL,将证书内容复制进去,点击保存后会在"配置文件"生成一个serve{}代码块 3,删掉默认的serve{},保留经过SSL生成的serve ...
- 数字电路之MOS设计
数字电路之MOS设计 1.MOS的基本性质 MOS,即场效应管,四端器件,S.D.G.B四个端口可以实现开和关的逻辑状态,进而实现基本的逻辑门.NMOS和PMOS具有明显的对偶特性:NMOS高电平打开 ...
- KingbaseESV8R6表空间与数据库,模式,表的关系
自定义表空间的作用 使用多个表空间可以更灵活地执行数据库操作.当数据库具有多个表空间时,您可以: 1.将用户数据与系统表数据分开存储在不同性能的存储上,以减少I/O争用. 2.将一个应用程序的数据与另 ...
- 15 CSS总结
15 CSS总结 到此,css的知识就结束了,掌握这些知识,搞爬虫足够了.如果朋友还有兴趣可以去css其他学习网站去看看其他的一些属性用法,(菜鸟教程 https://www.runoob.com/c ...