html动态生成下载二维码

一，引包

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

二，body中定义

<button type="button" onclick="clickGenealogy()">二维码</button>
					<button type="button" onclick="downloadClick()">下载</button>
					<a id="downloadLink"></a>
					<div id="qrcode"></div>

三，方法

function clickGenealogy() {
				alert("开始点击");
				var qrcode = $('#qrcode').qrcode({
					width: 128,
					height: 128,
					text: "二维码的内容"
				});
			}
			function downloadClick () {
			    var canvas = $('#qrcode canvas')[0];
			    url = canvas.toDataURL('image/png');
			    // 构造a标签并模拟点击
			    var downloadLink = $('#downloadLink').attr("href", url).attr("download", "二维码.png");
			    downloadLink[0].click();
			  }

扩展：将base64图片构建成画布并模拟点击a标签下载

//js
  function downloadClick () {
    // 获取base64的图片节点
    var img = document.getElementById('qrcode').getElementsByTagName('img')[0];
    // 构建画布
    var canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;
    canvas.getContext('2d').drawImage(img, 0, 0);
    // 构造url
    url = canvas.toDataURL('image/png');
    // 构造a标签并模拟点击
    var downloadLink = document.getElementById('downloadLink');
    downloadLink.setAttribute('href', url);
    downloadLink.setAttribute('download', '二维码.png');
    downloadLink.click();
  }
  //jquery
  function downloadClick () {
    // 获取base64的图片节点
    var img = $('#qrcode img')[0];
    // 构建画布
    var canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;
    canvas.getContext('2d').drawImage(img, 0, 0);
    // 构造url
    url = canvas.toDataURL('image/png');
    // 构造a标签并模拟点击
    var downloadLink = $('#downloadLink').attr("href", url).attr("download", "二维码.png");
    downloadLink[0].click();
  }