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

最新推荐文章于 2024-07-13 14:15:29 发布

_Zing

最新推荐文章于 2024-07-13 14:15:29 发布

阅读量1.7k

点赞数

分类专栏： javascript 文章标签：二维码

本文链接：https://blog.csdn.net/csdnwws/article/details/52252399

版权

javascript 专栏收录该内容

1 篇文章

订阅专栏

最近在做二维码的生成，可谓一波三折，各种各样的问题都出现了。（以下出现的各种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