qrcode插件生成二维码并下载
很多情况下，我们需要实现点击按钮，下载二维码图片功能，
1.以下是页面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<!-- jQuery 库 -->
<script src="js/jquery-3.2.1.js"></script>
<!-- jQuery 转二维码所需插件 -->
<script src="js/jquery.qrcode.js"></script>
</head>
<body>
<button id="button" class="button" type="submit" data-code="1">下载图片1</button>
<button id="button2" class="button" type="submit" data-code="2">下载图片2</button>
<!-- 容纳二维码 -->
<div id="QR_Code"></div>
</body>
<style>
#QR_Code{
display: none;
}
</style>
<script type="text/javascript">
window.onload = function () {
// 按钮点击事件
$(".button").click(function () {
var code=$(this).attr("data-code");
$('#QR_Code').qrcode({
render: "canvas",
text: "https://www.baidu.com/?code="+code
});
var canvasImg = document.getElementsByTagName('canvas')[0];
var img =convertCanvasToImage(canvasImg);
$('#QR_Code').empty();
$('#QR_Code').append(img);
downLoadCode();
alert("下载完成");
})
}
// 将utf-16 转换成 utf-8【默认字符编码是utf-16】
function utf16to8(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;
}
//从canvas中提取图片image
function convertCanvasToImage(canvas) {
//新Image对象，可以理解为DOM
var image = new Image();
// canvas.toDataURL 返回的是一串Base64编码的URL，当然,浏览器自己肯定支持
// 指定格式PNG
image.src = canvas.toDataURL("image/png");
return image;
};
// 下载二维码
function downLoadCode(){
var img = $('#QR_Code').children('img').attr("src");
var alink = document.createElement("a");
alink.href = img;
alink.download = "二维码.png";
alink.click();
}
</script>
</html>
2.以下是qrcode.js文件代码
function QR8bitByte(a){
this.mode=QRMode.MODE_8BIT_BYTE,
this.data=a
}
function QRCode(a,b){
this.typeNumber=a,
this.errorCorrectLevel=b,
this.modules=null,
this.moduleCount=0,
this.dataCache=null,
this.dataList=new Array()
}
function QRPolynomial(a,b){
var c,d;
if(void 0==a.length){
throw new Error(a.length+"/"+b)
}
for(c=0;c<a.length&&0==a[c];){
c++
}
for(this.num=new Array(a.length-c+b),d=0;d<a.length-c;d++){
this.num[d]=a[d+c]
}
}
function QRRSBlock(a,b){
this.totalCount=a,
this.dataCount=b
}
function QRBitBuffer(){
this.buffer=new Array(),
this.length=0
}
var QRMode,QRErrorCorrectLevel,QRMaskPattern,QRUtil,QRMath,i;
for(function(a){
a.fn.qrcode=function(b){
var c,d;
return"string"==typeof b&&(b={text:b}),
b=a.extend({},{
render:"canvas",
width:256,
height:256,
//?????????????????
imgWidth:b.width/4.7,
imgHeight:b.height/4,
typeNumber:-1,
correctLevel:QRErrorCorrectLevel.H,
background:"#ffffff",
foreground:"#000000"
},b),c=function(){
var c,d,e,f,g,h,i,j,k,a=new QRCode(b.typeNumber,b.correctLevel);
for(a.addData(utf16to8(b.text)),a.make(),
c=document.createElement("canvas"),
c.width=b.width,c.height=b.height,d=c.getContext("2d"),
b.src&&(e=new Image(),e.src=b.src,e.οnlοad=function(){
d.drawImage(e,(b.width-b.imgWidth)/2,(b.height-b.imgHeight)/2,
b.imgWidth,b.imgHeight)}),f=b.width/a.getModuleCount(),
g=b.height/a.getModuleCount(),h=0;h<a.getModuleCount();h++)
{for(i=0;i<a.getModuleCount();i++){
d.fillStyle=a.isDark(h,i)?b.foreground:b.background,
j=Math.ceil((i+1)*f)-Math.floor(i*f),
k=Math.ceil((h+1)*f)-Math.floor(h*f),
d.fillRect(Math.round(i*f),Math.round(h*g),j,k)
}}return c},
d=function(){var d,e,f,g,h,i,
c=new QRCode(b.typeNumber,b.correctLevel);
//?????tf16to8(b.text)???Text????????????????????????
for(c.addData(utf16to8(b.text)),c.make(),d=a("
").css("width",b.width+"px").css("height",b.height+"px").css("border","0px").css("border-collapse","collapse").css("background-color",b.background),e=b.width/c.getModuleCount(),f=b.height/c.getModuleCount(),g=0;g<c.getModuleCount();g++){for(h=a("