zoukankan      html  css  js  c++  java
  • 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 地址
                        i 20, // icon 显示的宽度
                        iheight: 20, // icon 显示的高度
                        ibcolor: "red"// icon 边框颜色 
                        },
    //                    background:'lightblue',
    //                    foreground:'red'
                        };
                        $('#div1').qrcode(cfg);
  • 相关阅读:
    素数筛相关
    ACM-ICPC 2017 Asia Shenyang
    codeforces/contest/1228
    Python 支持的编码格式列表
    Python——json格式数据与字典相互转换
    mysql 数据查询基本语法
    Python 奇葩问题总结;
    Python中的Subprocess模块 python 命令行操作 系统任务管理 执行系统命令
    C++ Json打包数据 查看数据
    mysql数据无法读出 idb文件恢复数据
  • 原文地址:https://www.cnblogs.com/sheqiuluo/p/7218329.html
Copyright © 2011-2022 走看看