点击下载 canvas 到本地

需求分析

前端用了 jquery.qrcode.min.js 将链接转化为 qrcode （二维码），内部是通过在 canvas 绘制点阵图实现的。

虽然右击 canvas 也可以保存成图片下载到本地，但领导意思是要有显式的按钮下载。

之前做过一个 HTML+JS 实现下载图片到本地 教程，通过 a 标签的 download 配合 href，可以实现本地下载。

可以通过 canvas 的 toDataUrl() 方法将其转化为 Base64 格式的图片编码，然后将其作为图片下载到本地。

图片源文件地址，或者 Base64 格式的图片编码，这两种方式都能够表示图片。

代码实现

Html 部分

<canvas width="256" height="256"></canvas>
<button class="downloadBtn" type="button" onclick="downloadImg()">下载图片</button>

js 部分

function downloadImg(){
    var canvas = document.getElementsByTagName('canvas')[0];// 也可以添加 id,name 进行选择
    var href = canvas.toDataURL();                // 获取 canvas 对应的 base64 编码
    var a = document.createElement('a');          // 创建一个 a 节点插入的 document
    var event = new MouseEvent('click')           // 模拟鼠标 click 点击事件
    a.download = '我的二维码'                      // 设置 a 节点的 download 属性值
    a.href = url;                                 // 将图片的 src 赋值给 a 节点的 href
    a.dispatchEvent(event)                        // 触发鼠标点击事件
}

在查找相关 demo 的时候，还发现了另外一种触发点击事件的方法：

将创建的 a 标签添加到 document 文档中，然后调用标签元素的 click() 方法。

function downloadImg(){
    var canvas = document.getElementsByTagName('canvas')[0];
    var url = canvas.toDataURL("image/png");
    var a = document.createElement("a");
    document.body.appendChild(a);
    a.href = url;
    a.download = "我的二维码";
    a.target = "_blank";
    a.click();
}