首页 > 代码库 > amazeui+canvas绘制二维码
amazeui+canvas绘制二维码
<link rel="stylesheet" type="text/css" href="css/amazeui.min.css"/> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/amazeui.min.js"></script> <div id="div1"> </div>
AMUI.qrcode.prototype.createCanvas = function(qrCodeAlg) { //创建canvas节点 var canvas = document.createElement(‘canvas‘); canvas.width = this.options.width; canvas.height = this.options.height; var ctx = canvas.getContext(‘2d‘); //计算每个点的长宽 var tileW = (this.options.width / qrCodeAlg.getModuleCount()).toPrecision(4); var tileH = this.options.height / qrCodeAlg.getModuleCount().toPrecision(4); //绘制 for (var row = 0; row < qrCodeAlg.getModuleCount(); row++) { for (var col = 0; col < qrCodeAlg.getModuleCount(); col++) { ctx.fillStyle = qrCodeAlg.modules[row][col] ? this.options.foreground : this.options.background; var w = (Math.ceil((col + 1) * tileW) - Math.floor(col * tileW)); var h = (Math.ceil((row + 1) * tileW) - Math.floor(row * tileW)); ctx.fillRect(Math.round(col * tileW), Math.round(row * tileH), w, h); } } //====== 二维码ICON start========= function roundedRect(context, cornerX, cornerY, width, height, cornerRadius) { if (width> 0) context.moveTo(cornerX + cornerRadius, cornerY); else context.moveTo(cornerX - cornerRadius, cornerY); context.arcTo(cornerX+width,cornerY,cornerX + width,cornerY+height,cornerRadius); context.arcTo(cornerX+width,cornerY + height,cornerX,cornerY+height,cornerRadius); context.arcTo(cornerX,cornerY+height,cornerX,cornerY,cornerRadius); if(width> 0) { context.arcTo(cornerX,cornerY,cornerX+cornerRadius,cornerY,cornerRadius); } else{ context.arcTo(cornerX,cornerY,cornerX-cornerRadius,cornerY,cornerRadius); } } function drawRoundedRect(context, strokeStyle,fillStyle,cornerX,cornerY,width,height,cornerRadius) { context.beginPath(); roundedRect(context, cornerX, cornerY, width, height, cornerRadius); context.strokeStyle = strokeStyle; context.fillStyle = fillStyle; context.stroke(); context.fill(); } if(this.options.icon.url != null){ var img = new Image, iw = this.options.icon.iwidth, ih = this.options.icon.iheight, ix = (this.options.width - iw) / 2, iy = (this.options.height - ih) / 2, ibc = this.options.icon.ibcolor, ibgc = this.options.background; //img.crossOrigin = ‘‘; //解决跨域 img.src = http://www.mamicode.com/this.options.icon.url; img.onload = function(){ drawRoundedRect(ctx, ibc, ibgc, ix - 5, iy - 5, iw + 10, ih + 10, 5) ctx.drawImage(img, ix, iy, iw, ih); } } //====== 二维码ICON end========= //返回绘制的节点 return canvas; }; //2.使用 var cfg = { text: "http://devfm.ld-kj.cn/?dlsHusBbqjj", // 要生产二维码的文字 icon: { url: "http://devfm.ld-kj.cn/?dlsHusBbqjj", // icon 地址 iwidth: 20, // icon 显示的宽度 iheight: 20, // icon 显示的高度 ibcolor: "red"// icon 边框颜色 }, // background:‘lightblue‘, // foreground:‘red‘ }; $(‘#div1‘).qrcode(cfg);
amazeui+canvas绘制二维码
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。