利用qrcode.js生成二维码,并点击按钮下载二维码图片(亲测可用)

话不多说,先上代码(复制即用):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二维码</title>
    <style>
        body{
            padding:0;
            margin:0;
            width: 100vw;
            height: 100vh;
        }
        #qrCode{
            position: absolute;
            margin:auto;
            left:0;
            right:0;
            top:0;
            bottom:0;
            width:300px;
            height: 300px;
        }
    </style>
</head>



<!-- 以下是正文 -->


<body>
    <div id="qrCode"></div>
    <button> downLoad </button>
</body>

<!-- 引入qrcode,可以先去菜鸟教程上下载 -->

<script src="./plug/qrcode.min.js">  </script>
<script>
    const qrcode = new QRCode("qrCode", {
        text: "http://www.runoob.com",
        width: 128,
        height: 128,
        colorDark : "#000000",
        colorLight : "#ffffff",
        correctLevel : QRCode.CorrectLevel.H
    });

    const qrCode = document.querySelector("#qrCode")
    const img = qrCode.querySelector("img")
    let imgSrc = ""
    img.onload=()=>{//注意这里一定要在img.onload()中取src,否则取到为null
        imgSrc = qrCode.querySelector("img").src
    }
    
    //这里是使用img获取src,也可以使用canvas,在此先将其注释掉
    // const canvas = document.getElementsByTagName("canvas")[0].toDataURL("image/png")


    document.getElementsByTagName("button")[0].addEventListener("click",()=>{
        const alink = document.createElement("a")
        alink.setAttribute("href",imgSrc)//如果使用canvas,那么把imgSrc改为canvas
        alink.download="qrCode.png"
        alink.click()
    })
</script>
</html>

接下来分段讲解:

一、首先是HTML标签

    <div id="qrCode">div>
    <button> downLoad button>

二、利用qrcode生成二维码

    const qrcode = new QRCode("qrCode", {//这个qrCode是承载二维码元素的id
        text: "http://www.runoob.com",//二维码的内容也可以是段文本
        width: 128,//宽
        height: 128,//高
        colorDark : "#000000",//前景色
        colorLight : "#ffffff",//背景色
        correctLevel : QRCode.CorrectLevel.H //容错
    });

然后打开浏览器调试可以发现,element变成了这样,多了一个canvas和img标签,其中canvas还是display:none,你把它打开会发现两个一模一样的二维码
利用qrcode.js生成二维码,并点击按钮下载二维码图片(亲测可用)_第1张图片

三、取二维码地址下载图片

可以用img取

	const qrCode = document.querySelector("#qrCode")
    const img = qrCode.querySelector("img")
    let imgSrc = ""
    img.onload=()=>{//注意这里一定要在img.onload()中取src,否则取到为null
        imgSrc = qrCode.querySelector("img").src
    }

也可以用canvas取

const canvas = document.getElementsByTagName("canvas")[0].toDataURL("image/png")

四、添加点击事件,下载逻辑

	document.getElementsByTagName("button")[0].addEventListener("click",()=>{
        const alink = document.createElement("a")
        alink.setAttribute("href",imgSrc)//如果使用canvas,那么把imgSrc改为canvas
        alink.download="qrCode.png"
        alink.click()
    })

你可能感兴趣的:(js,html,javascript,vue.js,reactjs)