js 生成二维码并点击下载软件_js生成二维码并保存

全栈程序员-站长 • 2022年10月18日上午8:16 • 未分类 • 阅读 0

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文件

<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;
        }