js jquery 生成二维码 jquery.qrcode.js,并在中间添加logo图片

写在前面的话:我在网上查了一下,有些说qrcode不支持加logo,有些说加img标签,有些又直接加了,我也有点蒙。不加logo这个肯定可行,我是直接加了也能用

我的代码:

1,需要jquery.js和jquery.qrcode.js(我会给出我用的jquery.qrcode.js)

2,jsp:

<div >二 维 码:<span id="qrcode"></span></div>
3,js:

				jQuery('#qrcode').qrcode({
					text : "www.地址.com",
					render   : "canvas",//设置渲染方式  
					width       : 112,     //设置宽度  
					height      : 112,     //设置高度  
					<span style="background-color: rgb(255, 255, 255);"><span style="color:#ff0000;">src: 'img/default.jpg',</span></span>
					typeNumber  : -1,      //计算模式  
					correctLevel    : QRErrorCorrectLevel.H,//纠错等级  
					background      : "#ffffff",//背景颜色  
					foreground      : "#000000", //前景颜色 
				});
4,图片路径(我js直接写在了jsp里),目录结构是这样的:



参考文献:

一,Jquery.Qrcode在客户端动态生成二维码并添加自定义Logo - cometwo - 博客园  (支持中文)

http://www.cnblogs.com/libin-1/p/5836108.html

二,jquery.qrcode 生成二维码带logo - whlives - 博客园 

  http://www.cnblogs.com/whlives/p/5531064.html


额,不知道怎么上传附件。。。我直接整个贴上来吧

jquery.qrcode.min.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/2.5,imgHeight:b.height/2.5,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(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);for(c.addData(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").appendT
  • 2
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值