js 生成二维码并点击下载

html 部分

<h1>
    文字生成二维码及生成可下载的图片
</h1>
<div><input id="input" value="http://www.baidu.com" type="text"><button type="button" onclick="refresh()">生出来</button></div>
<div id="output">
    <!--这里放canvas格式的二维码-->
</div>
<p>上面的码是使用canvas标签, 下面的是img标签</p>
<div id="img-qr">
    <!--放img格式的二维码-->
</div>
<p id="download">
    <!--放下载链接-->
</p>

js

我们先引入两个js文件

<script src="http://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>

 window.onload = function () {
        refresh();
    };

    function refresh() {
        let text = document.getElementById("input").value;
        creater(text);
    }

    /**
     * 生成二维码及下载链接的函数
     * @param text 传入你要生成二维码的文字
     */
    function creater(text = '') {
        //http://www.baidu.com可以自定义任意你要的链接或者文字
        jQuery('#output').empty().qrcode(text);
        let drawing = document.getElementsByTagName('canvas')[0];
        //确定浏览器支持<canvas>元素
        if (drawing.getContext) {
            let context = drawing.getContext('2d');
            console.log(context);
            //取得图像的数据 URI
            let imgURI = drawing.toDataURL("image/png");

            //显示img格式图片开始(不要此步可以跳过)
            let image = document.createElement("img");
            image.src = imgURI;
            $("#img-qr").empty().append(image);
            //显示img格式图片结束(不要此步可以跳过)

            //显示下载链接开始
            let a = document.createElement("a");
            a.href = imgURI;
            //设置下载链接的文字提示
            a.innerText = 'download qrcode';
            //设置下载的文件名
            a.download = 'test.png';
            document.body.appendChild(a);
            $("#download").empty().append(a);
            //显示下载链接结束
        }
    }

界面效果

如果想生成中文，并且出现了乱码，可以使用下面方法将input文字进行转换

function toUtf8(str) {
            var out, i, len, c;
            out = "";
            len = str.length;
            for (i = 0; i < len; i++) {
                c = str.charCodeAt(i);
                if ((c >= 0x0001) && (c <= 0x007F)) {
                    out += str.charAt(i);
                } else if (c > 0x07FF) {
                    out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
                    out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
                    out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
                } else {
                    out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
                    out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
                }
            }
            return out;
        }