zoukankan      html  css  js  c++  java
  • js生成二维码,支持打印显示

    Jquery中的二维码生成插件jquery.qrcode.js,

    导入2个Jq文件:qrcode.js (二维码生成算法)    jquery.qrcode.js(使用配置)

    下载链接:

    链接:https://pan.baidu.com/s/1fDpoNPhDtAocho-uTl9xQg
    提取码:b9go

    基本使用方法:

    $("#id").qrcode("http://......");  //在指定元素中生成二维码

    注意:原本qrcode生成的是canvas元素,而canvas是无法打印出来的,会显示为空白,应将canvas转换为image返回

    在jquery.qrcode.js中creatCanvas方法中修改:

    var createCanvas    = function(){
                // create the qrcode itself
                var qrcode    = new QRCode(options.typeNumber, options.correctLevel);
                qrcode.addData(options.text);
                qrcode.make();
    
                // create canvas element
                var canvas    = document.createElement('canvas');
                canvas.width    = options.width;
                canvas.height    = options.height;
                var ctx        = canvas.getContext('2d');
    
                // compute tileW/tileH based on options.width/options.height
                var tileW    = options.width  / qrcode.getModuleCount();
                var tileH    = options.height / qrcode.getModuleCount();
    
                // draw in the canvas
                for( var row = 0; row < qrcode.getModuleCount(); row++ ){
                    for( var col = 0; col < qrcode.getModuleCount(); col++ ){
                        ctx.fillStyle = qrcode.isDark(row, col) ? options.foreground : 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);  
                    }    
                }
    var image=new Image(); image.src=canvas.toDataURL("image/png"); image.id="qrcode";
           return image;
    // return canvas }

    转换方法:

    function(canvas){    
    var image=new Image(); image.src=canvas.toDataURL("image/png"); image.id="qrcode";
       return image;
    }

      

  • 相关阅读:


    查看linux内核版本信息
    netstat常用命令
    cpuinfo和lscpu查看CPU相关的信息
    Openstack的命令
    iptables常用命令及应用
    RPC-server的创建过程
    RabbitMQ and Oslo.messaging
    Python中的cls与self的区别
  • 原文地址:https://www.cnblogs.com/yhood/p/11447521.html
Copyright © 2011-2022 走看看