[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的网页还这么多.另外此网页找下一页的方式比较异常,又再次借助了正则表达式. 代码如下: //============================ ...
随机推荐
- Android 开发Day7
<project version="4"> <component name="ExternalStorageConfigurationManager&q ...
- 5G+实时云渲染:交互实时云看车革新购车体验
随着科技的发展,用户的购车方式已然发生了改变. 传统的购车过程中,用户需要亲自去4S店看车.选车.预约试驾,最后完成交易. 互联网的发展和突如其来的疫情,让看车.选车.预约试驾这三个过程,逐步被搬到线 ...
- 面试官:SpringBoot如何优雅停机?
优雅停机(Graceful Shutdown) 是指在服务器需要关闭或重启时,能够先处理完当前正在进行的请求,然后再停止服务的操作. 优雅停机的实现步骤主要分为以下几步: 停止接收新的请求:首先,系统 ...
- 记录--你不知道的Js高级方法
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 前言 在Js中有一些比较冷门但是非常好用的方法,我在这里称之为高级方法,这些方法没有被广泛使用或多或少是因为存在一些兼容性的问题,不是所有 ...
- js中订阅发布模式bus
export default { list: {}, // 事件中心集中地 /** * 发布订阅 * @param {string} name 事件名 * @param [...args] */ $e ...
- Failed to start component [StandardEngine[Catalina].StandardHost[localhost]] 记录
jar包冲突 解决: <dependency> <groupId>org.springframework.cloud</groupId> <a ...
- Java中关于优先队列PriorityQueue详解
一.优先队列概述 优先队列PriorityQueue是Queue接口的实现,可以对其中元素进行排序, 可以放基本数据类型的包装类(如:Integer,Long等)或自定义的类 对于基本数据类型的包装器 ...
- HashSet 存对象的时候是如何判断是不是同一个对象,其中含有重写equals方法和hashcode方法 后续
一开始,set集合里面只存进一个对象, 存第二个对象时候,由于重写了hashcode方法,只要价格都是10就返回1,所以hashcode一样的话,再去进行equals方法判断,此时这个也重写了,thi ...
- #排列组合,背包#CF232B Table
题目 有一个 \(n\times m\) 的矩阵,求使得每个 \(n\times n\) 的矩阵中都有正好 \(k\) 个点的方案数. 分析 考虑到如果确定了前 \(n\) 列的选点个数,那么对于一列 ...
- #二分图,并查集#洛谷 6185 [NOI Online #1 提高组] 序列
题目 分析 考虑2操作可以在保证总和不变的情况下任意修改, 如果将2操作所在的连通块用并查集缩点,那么再考虑1操作, 按照1操作建边,如果存在奇环,那么只要这个环的点权和为偶数一定能使 \(a,b\) ...