1. 程式人生 > >amazeui+canvas繪制二維碼

amazeui+canvas繪制二維碼

javascrip cnblogs ext mat 節點 lec ons contex .get

<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 = 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繪制二維碼