qrcode插件生成二维码并下载

最新推荐文章于 2024-05-15 03:18:29 发布

春天姐姐

最新推荐文章于 2024-05-15 03:18:29 发布

阅读量1.5k

点赞数

本文链接：https://blog.csdn.net/qq_26337713/article/details/102682475

版权

很多情况下，我们需要实现点击按钮，下载二维码图片功能，
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("<table></table>").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("<tr></tr>").css("height",f+"px").appendTo(d),i=0;i<c.getModuleCount();i++){
   a("<td></td>").css("width",e+"px").css("background-color",c.isDark(g,i)?b.foreground:b.background).appendTo(h)}}return d},this.each(function(){
   var e="canvas"==b.render?c():d();a(e).appendTo(this)})}}(jQuery),QR8bitByte.prototype={
   getLength:function(){
   return this.data.length},write:function(a){
   for(var b=0;b<this.data.length;b++){
   a.put(this.data.charCodeAt(b),8)}}},QRCode.prototype={
   addData:function(a){
   var b=new QR8bitByte(a);this.dataList.push(b),this.dataCache=null},isDark:function(a,b){
   if(0>a||this.moduleCount<=a||0>b||this.moduleCount<=b){
   throw new Error(a+","+b)}return this.modules[a][b]},getModuleCount:function(){
   return this.moduleCount},make:function(){
   var a,b,c,d,e,f;if(this.typeNumber<1){
   for(a=1,a=1;40>a;a++){
   for(b=QRRSBlock.getRSBlocks(a,this.errorCorrectLevel),c=new QRBitBuffer(),d=0,e=0;e<b.length;e++){
   d+=b[e].dataCount}for(e=0;e<this.dataList.length;e++){
   f=this.dataList[e],c.put(f.mode,4),c.put(f.getLength(),QRUtil.getLengthInBits(f.mode,a)),f.write(c)}if(c.getLengthInBits()<=8*d){
   break}}this.typeNumber=a}this.makeImpl

最低0.47元/天解锁文章

春天姐姐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
qrcode插件生成二维码并下载

很多情况下，我们需要实现点击按钮，下载二维码图片功能，1.以下是页面代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>demo</title>  <...
复制链接

扫一扫