[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的网页还这么多.另外此网页找下一页的方式比较异常,又再次借助了正则表达式. 代码如下: //============================ ...
随机推荐
- FBEC大会 | 瑞云科技 CTO 赵志杰:元宇宙时代的基础设施——实时云渲染
FBEC未来商业生态链接大会于2023年2月24日在深圳福田大中华喜来登酒店盛大召开,本次大会由广东省游戏产业协会.深圳市互联网文化市场协会指导,陀螺科技主办. 大会以"勇毅前行·逐光而上& ...
- CSS(语义化标签、多媒体标签、新表单元素、属性选择器、结构伪类选择器、伪元素选择器、盒子模型、滤镜、calc函数、过渡)
一.HTML5新特性 概述 HTML5 的新增特性主要是针对于以前的不足,增加了一些新的标签.新的表单和新的表单属性等. 这些新特性都有兼容性问题,基本是 IE9+ 以上版本的浏览器才支持,如果不考虑 ...
- FFmpeg开发笔记(七)欧拉系统编译安装FFmpeg
FFmpeg支持Linux.macOS.Windows.Android等操作系统,其中Linux系列包括Ubuntu.Debian.Mint.CentOS.RHEL.Fedora等分支.FFmpeg官 ...
- Linux安装Oracle12C及一些参考
目录 安装 系统配置 安装前装备 安装依赖包 创建用户和组 修改内核参数 修改系统资源限制 创建安装目录及设置权限 设置oracle环境变量 安装Oracle 一些参考 compat-libstdc+ ...
- KingbaseES V8R6 空闲事务会话超时自动终止机制
背景 如果会话在事务中停留的时间过长,则允许自动终止空闲会话.可以由配置参数idle_in_transaction_session_timeout 事务处于空闲状态的时长,它有助于防止被遗忘的交易事务 ...
- python 处理国家标准行业编码(编码·门类·大类·中类·小类)
进度 今天完整地进行了行业维度的清洗分析,把行业代码根据国家标准清洗出格式为 "编码·门类·大类·中类·小类" 的数据格式 过程 1.先把国家标准编码转化为json数据 2.根 ...
- C++一些例子
虚析构 #include<iostream> class Base { public: Base() { std::cout << "base 构造" &l ...
- #根号分治,背包#51nod 1597 有限背包计数问题 LOJ 6089 小Y的背包计数问题
题目 有一个大小为\(n\)的背包,有\(n\)种物品, 第\(i\)种物品的大小为\(i\),且有\(i\)个, 求装满这个背包的方案数 \(n\leq 10^5\) 分析 直接多重背包会有问题,考 ...
- 体验Semantic Kernel图片内容识别
前言 前几日在浏览devblogs.microsoft.com的时候,看到了一篇名为Image to Text with Semantic Kernel and HuggingFace的文章.这篇文章 ...
- HE琥珀虚颜破解自由安装程序教程(001)
HE琥珀虚颜破解自由安装程序教程(001) 前言 自从狗尾草跑路后,HE琥珀就没法用了,当前APP还没法破解,但是笔者找到了HE琥珀存在的一些漏洞,可以实现安装自己的APP. 所需工具 所需工具 1. ...