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 = 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);

 

转载于:https://www.cnblogs.com/sheqiuluo/p/7218329.html