js生成二维码并保存成图片下载

我这里使用是jQuery,和jquery.qrcode.js,需要的可以自己找链接下载。示例代码仅做参考

html代码:

<a id="downloadLink"></a>
<button type="button" onclick="downloadClick()">下载</button>

js代码:

$(function(){
        var qrcode = $('#qrcode').qrcode({
             128,
            height: 128,
            text: "https://www.baidu.com"
        });
        downloadClick = function () {

                var data = $("canvas")[0].toDataURL().replace("image/png", "image/octet-stream;");//获取二维码值,并修改响应头部。
                var filename="tupian.png";//保存的图片名称和格式,canvas默认使用的png格式。这个格式效果最好。
                var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
                save_link.href = data;
                save_link.download = filename;

                var event = document.createEvent('MouseEvents');
                event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
                save_link.dispatchEvent(event);
        }
    })
document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
详细查询参考:https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createElementNS
其中第一个参数解释如下:

这不是一个计算值,它是基于检查范围内的命名空间声明的名称空间查找的结果。节点的命名空间URI在节点创建时被固定。

在Firefox 3.5或更早的版本中,HTML文档中HTML元素的名称空间URI是null。在之后的版本中,由http://www.w3.org/1999/xhtml 作为XHTML,符合HTML5.

原文地址:https://www.cnblogs.com/lengyue0030/p/10141294.html