使用canvas怎么下载二维码

二维码是一种二维图形码，可以将信息以多种编码形式嵌入其中，如URL链接、文本、电话号码等。随着移动互联网的发展，二维码已成为移动支付、电子商务、社交分享等领域的重要组成部分。在开发中，经常会需要将生成的二维码进行下载保存，本文将介绍如何使用canvas实现二维码的下载。

1.生成二维码

在下载前，需要先生成一个二维码。可以使用第三方库，例如qrcode.js，也可以使用canvas自己实现。这里以qrcode.js为例，首先需要引入库文件。

<script src="https://cdn.bootcss.com/qrcode-generator/qrcode.min.js"></script>

其次，需要在HTML中添加一个canvas元素，并设置其宽高。

<canvas id="code" width="200" height="200"></canvas>

接着，在JS中生成二维码，并将其画在canvas中。

var qrcode = new QRCode(document.getElementById("code"), {
  text: "https://www.example.com",
  width: 200,
  height: 200,
  colorDark : "#000000",
  colorLight : "#ffffff",
  correctLevel : QRCode.CorrectLevel.H
});

var canvas = document.getElementById("code");
var ctx = canvas.getContext("2d");
var myImg = new Image();
myImg.src = canvas.toDataURL();  //生成DataURL
ctx.drawImage(myImg, 0, 0);

这里将生成的二维码转换成DataURL格式，以便后续使用。

2.下载二维码

使用canvas下载二维码需要用到两个API：canvas.toDataURL和window.open，其中canvas.toDataURL方法可以将canvas中的内容转换成DataURL格式，而window.open方法可以弹出浏览器下载对话框。

var a = document.createElement("a");
a.href = myImg.src;  //使用生成的DataURL
a.download = "qrcode.png";  //设置下载的文件名
document.body.appendChild(a);  //将a标签添加到DOM中
a.click();  //模拟点击a标签

在以上步骤中，首先创建一个a标签，设置其href为生成的DataURL，download属性为下载的文件名，在DOM中添加a标签，最后模拟点击a标签进行下载。

完整代码如下：

//生成二维码
var qrcode = new QRCode(document.getElementById("code"), {
  text: "https://www.example.com",
  width: 200,
  height: 200,
  colorDark : "#000000",
  colorLight : "#ffffff",
  correctLevel : QRCode.CorrectLevel.H
});

var canvas = document.getElementById("code");
var ctx = canvas.getContext("2d");
var myImg = new Image();
myImg.src = canvas.toDataURL();  //生成DataURL
ctx.drawImage(myImg, 0, 0);

//下载二维码
var a = document.createElement("a");
a.href = myImg.src;  //使用生成的DataURL
a.download = "qrcode.png";  //设置下载的文件名
document.body.appendChild(a);  //将a标签添加到DOM中
a.click();  //模拟点击a标签进行下载

以上就是使用canvas下载二维码的具体步骤，通过使用canvas.toDataURL和window.open方法，可以轻松实现二维码的下载保存。