JS生成二维码（支持图片显示）

/*
 * jquery.qrcode.js
 * author：路过天涯（改版）
 *
 */
(function ($) {
    $.fn.qrcode = function (options) {
        var isHtml5 = false;
        if (document.getElementById("Canvas").getContext) {
            isHtml5 = true;
        }
        // if options is string, 
        if (typeof options === 'string') {
            options = { text: options };
        }

        // set default values
        // typeNumber < 1 for automatic calculation
        options = $.extend({}, {
            render: "canvas",
            width: 256,
            height: 256,
            typeNumber: -1,
            correctLevel: QRErrorCorrectLevel.H,
            background: "#ffffff",
            foreground: "#000000"
        }, options);

        var set_logoImg = function (width, height, qrcode) {
            var imgElement = $("#logoImg").attr("src");
            console.log(options);
            if (!imgElement) {
                //create the img logo
                var img = $(document.createElement("IMG"))
                       .attr("src", options.src)
                       .attr("id", "logoImg")
                       .css(
                               {
                                   "position": "absolute",
                                   "z-Index": 1000,
                                   "width": width * 10 + "px",
                                   "height": height * 10 + "px",
                                   "left": ((qrcode.getModuleCount() - 1) / 2 - 4) * width + "px",
                                   "top": ((qrcode.getModuleCount() - 1) / 2 - 4) * height + "px"
                               }
                           ).appendTo($('#qr_container'));
            }
        }
        var createCanvas = function () {
            // create the qrcode itself
            var qrcode = new QRCode(options.typeNumber, options.correctLevel);
            qrcode.addData(options.text);
            qrcode.make();

            // get canvas element
            var canvas = $("Canvas").get(0);
            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);
                }
            }
            //set logo
            set_logoImg(tileW, tileH, qrcode);
            // return just built canvas
            return canvas;
        }

        // from Jon-Carlos Rivera (https://github.com/imbcmdth)
        var createTable = function () {
            // create the qrcode itself
            var qrcode = new QRCode(options.typeNumber, options.correctLevel);
            qrcode.addData(options.text);
            qrcode.make();
            var $table;
            var tableTemp = $("#contentInfo").html();
            if (!tableTemp) {
                // create table element
                $table = $('<table></table>')
                    .css("width", options.width + "px")
                    .css("height", options.height + "px")
                    .css("border", "0px")
                    .css("border-collapse", "collapse")
                    .css('background-color', options.background)
                    .attr('id', "contentInfo");
            } else {
                $("#contentInfo").html("");
                $table = $("#contentInfo");
            }

            // compute tileS percentage
            var tileW = options.width / qrcode.getModuleCount();
            var tileH = options.height / qrcode.getModuleCount();

            // draw in the table
            for (var row = 0; row < qrcode.getModuleCount(); row++) {
                var $row = $('<tr></tr>').css('height', tileH + "px").appendTo($table);

                for (var col = 0; col < qrcode.getModuleCount(); col++) {
                    $('<td></td>')
                        .css('width', tileW + "px")
                        .css('background-color', qrcode.isDark(row, col) ? options.foreground : options.background)
                        .appendTo($row);
                }
            }
            //set logo
            set_logoImg(tileW, tileH, qrcode);
            // return just built canvas
            return $table;
        }


        return this.each(function () {
            var element = isHtml5 ? createCanvas() : createTable();
            $(element).appendTo(this);
        });
    };
})(jQuery);

jquery.qrcode.js

需要做一下几步：

第一步：

第二步：引入转码函数（将跳转url转码）

 1  function utf16to8(str) { //转码
 2             var out, i, len, c;
 3             out = "";
 4             len = str.length;
 5             for (i = 0; i < len; i++) {
 6                 c = str.charCodeAt(i);
 7                 if ((c >= 0x0001) && (c <= 0x007F)) {
 8                     out += str.charAt(i);
 9                 } else if (c > 0x07FF) {
10                     out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
11                     out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
12                     out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
13                 } else {
14                     out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
15                     out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
16                 }
17             }
18             return out;
19         }

utf16to8

第三步：创建二维码

// 生成二维码
$('#放置二维码的容器').qrcode({
            text: utf16to8("扫码跳转地址"),   //扫码跳转地址
            height: 200,                            //二维码高度
            width: 200,                             //二维码宽度
            src: “可访问的图片url”               //可访问的图片url
        });

createQr

1    <div id="div_qr">//存放二维码的容器
2         <div id="qr_container" style="margin: auto; position: relative;">
3         </div>
4    </div>
5    <!-- 用来校验该浏览器是否支持HTML5 -->
6    <canvas id="Canvas"></canvas>