点击下载 canvas 到本地
需求分析
前端用了 jquery.qrcode.min.js
将链接转化为 qrcode (二维码),内部是通过在 canvas 绘制点阵图实现的。
虽然右击 canvas 也可以保存成图片下载到本地,但领导意思是要有显式的按钮下载。
之前做过一个 HTML+JS 实现下载图片到本地 教程,通过 a
标签的 download
配合 href
,可以实现本地下载。
可以通过 canvas 的 toDataUrl()
方法将其转化为 Base64 格式的图片编码,然后将其作为图片下载到本地。
图片源文件地址,或者 Base64 格式的图片编码,这两种方式都能够表示图片。
代码实现
Html 部分
js 部分
在查找相关 demo 的时候,还发现了另外一种触发点击事件的方法:
将创建的 a 标签添加到 document 文档中,然后调用标签元素的 click() 方法。
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。