海滨擎蟹

点击下载 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();
}

当前页面是本站的「Google AMP」版。查看和发表评论请点击:完整版 »