二维码制作-js客户端与java服务器端两种

最近在做二维码的生成，可谓一波三折，各种各样的问题都出现了。（以下出现的各种js、jar都给出连接下载，同时给出demo：点击打开链接）

1.首先，做个二维码还是比较简单的，jquery有个jquery.qrcode.min.js插件可用（链接已给）

var options = {
                render: "canvas", // 渲染方式有table方式（IE兼容）和canvas方式
                width: picwidth, //宽度 
                height:picheight, //高度 
                text: utf16to8(url), //内容 
                typeNumber:-1,//计算模式
                correctLevel:2,//二维码纠错级别
                background:"#ffffff",//背景颜色
                foreground:"#000000"  //二维码颜色
            };
            $('#container').empty().qrcode(options);

2.需求改了，需要生成一个中间带logo（图片的二维码）:

var options = {
                render: "canvas",
                ecLevel: 'H',//识别度
                fill: '#000',//二维码颜色
                background: '#ffffff',//背景颜色
                quiet: 2,//边距
                width: 200,//宽度
                height: 200,
                text: "http://www.whui.org",//二维码内容
                //中间logo start
                mode: 4,
                mSize: 11 * 0.01,
                mPosX: 50 * 0.01,
                mPosY: 50 * 0.01,
                image: $("#logo")[0],//logo图片
                //中间logo end
                label: 'jQuery.qrcode',
                fontname: 'Ubuntu',
                fontcolor: '#ff9818',
            };

3.不行，生成的二维码要能保存到本地，好吧，要生成图片了（早说啊）。题外话，使用Qrcode生成的二维码是一个元素，有两种形式：table、canvas（在render设参数）。要是带logo（中间放图片）的话，其实就是把logo图片作为一个img元素和canvas元素放在一个div中。可以使用html2canvas.js插件，将组合的div合成一个canvas，在使用canvas2image.js将canvas元素转成Img，就是一张图片了，可以保存和分享。

 html2canvas($("#container"), {
                onrendered: function(canvas) {
                    //document.body.appendChild(canvas);
                    $("#container").empty();
                    $("#canvas_tmp").empty();
                    $("#canvas_tmp").get(0).appendChild(canvas);
                    var $canvas = $(canvas);
		    //给生成的canvas绑定id
                    $canvas.attr("id","mm");
                    document.getElementById("qrcode_placeholder").src = document.getElementById("mm").toDataURL('image/png');
                    $("#job_num").val("");
                }
            });

见code3.html

4.关键问题出现了，在firefox下没问题，在chrome下却不行。花了好久，找到答案了，原来这有跨域问题，部署在服务器（tomcat之类）就可以了。挺好，但是用手机又不行了，咋办，没办法了，只好后台生成，将图片发到前台了。使用了两个工具类和一个jar见zpxing.zip，已分享。

最后折腾半天终于ok，打war包，发布！

有问题可以留言。。