使用jquery.qrcode生成二维码并转成图片点击按钮可下载_jquery生成二维码下载

引入js：

<script type="text/javascript" src="/js/jquery.qrcode.min.js"></script>

创建展示二维码的容器：

<div id="qrcode"></div>
<img id="qrcodeImage"/>

调用插件生成二维码：

/**
 * jquery前端生成二维码
 */
function getQRCode(text) {
    //生成并隐藏二维码
    var qrcode=$("#qrcode").qrcode({
        render: "canvas", //table方式，默认canvas
        width: 150, //宽度
        height:150, //高度
        text: text, //任意内容
        background : "#ffffff",       //二维码的后景色
        foreground : "#000000"        //二维码的前景色
        // src: '/logo/tx.png'  //二维码中间的图片
    }).hide();
    //保存到图片
    var canvas=qrcode.find('canvas').get(0);//我这使用的是canvas生成
    $('#qrcodeImage').attr('src',canvas.toDataURL('image/jpg'))
}

中文处理：

//识别中文
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;
}

赋值调用：

var qrcodeText=toUtf8("百度百度www.baidu.com");
getQRCode(qrcodeText);

点击按钮可下载：

<button type="button" class="btn btn-secondary btn-sm" onclick="saveQrcodeImage()">下载二维码</button>

//下载二维码图片
function saveQrcodeImage() {
    var qrcodeImage = $('#qrcodeImage').attr("src");
    var alink = document.createElement("a");
    alink.href = qrcodeImage;
    alink.download = "二维码.png";
    alink.click();
}