基于Jquery的多彩二维码的生成
Demo效果图:
源代码:
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script type="text/javascript" src="/Scripts/jquery-1.10.2.js"></script> <script type="text/javascript" src="/Scripts/PickColor.js"></script> <style type="text/css"> #iColorPicker { color: #fff; background: #333; border: 1px solid #ccc; padding: 5px; z-index: 9999; } #colorPreview { height: 50px; } table.pickerTable { border-collapse: collapse; } table.pickerTable td { width: 12px; height: 14px; border: 1px solid #000; cursor: pointer; } .logoClass { margin: 5px 0; } .logoClass img { border-radius: 10px; } </style> </head> <body> <table> <tr> <td>背景颜色：</td> <td><input name="bgcolor" id="bgcolor" type="text" value="" class="temp" hx="#ccc" /></td> </tr> <tr> <td>前景颜色：</td> <td><input name="fgcolor" id="fgcolor" type="text" value="" class="temp" hx="#000" /></td> </tr> <tr> <td>渐变颜色：</td> <td><input name="gccolor" id="gccolor" type="text" value="" class="temp" hx="#ee1d24" /></td> </tr> <tr> <td>纠错等级：</td> <td> <select id="el"> <option value="h">高</option> <option value="q">中等</option> <option value="m">低</option> <option value="l">最低</option> </select> </td> </tr> <tr> <td>尺寸大小（单位像素）：</td> <td> <input type="text" id="wwidth" value="300"/> </td> </tr> <tr> <td>静区（外边距）:</td> <td> <input type="text" id="mwidth" value="30" /> </td> </tr> <tr> <td>定位点颜色（外框）</td> <td><input name="ptcolor" id="ptcolor" type="text" class="temp" value="" hx="#00bff3" /></td> </tr> <tr> <td>定位点颜色（内点）</td> <td><input name="inptcolor" id="inptcolor" type="text" class="temp" value="" hx="#197b30" /></td> </tr> <tr> <!--若要将添加的logo导入到二维码，需将图片上传到服务器，这里以静态图片为例--> <td>logo图片：</td> <td> <input type="file" id="logo" name="logo" onchange="previewImage(this.id, 'imgPre');" /> <div class="logoClass"> <img id="imgPre" src="http://yintai.aitoy.com/Images/Presentation/XintiandiOF/stati2.png" width="100" height="100" /> </div> </td> </tr> <tr> <td>待输入文本：</td> <td> <textarea id="txtInfo" name="txtInfo" style="width: 300px;height: 100px"></textarea> </td> </tr> </table> <hr/> <input type="button" id="btnOk" name="btnOk" value="提交" /> <hr /> <img id="imgPath" src="" /> </body> </html> <script> function getBrowser() { if (navigator.userAgent.indexOf("MSIE") >= 1) { return "ie"; } else if (navigator.userAgent.indexOf("Firefox") > 0) { return "ff"; } else if (navigator.userAgent.indexOf("Chrome") > 0) { return "chrome"; } } function previewImage(fileId, imgId) { var url = ""; var b = getBrowser(); switch (b) { case "ie": url = document.getElementById(fileId).value; break; case "ff": url = window.URL.createObjectURL(document.getElementById(fileId).files.item(0)); break; case "chrome": url = window.URL.createObjectURL(document.getElementById(fileId).files.item(0)); break; } document.getElementById(imgId).src = url; } $(function () { $('.temp').iColor(null, { 'x': -175, 'y': 200 }); }); $(function() { $("#btnOk").click(function() { var bg = $("#bgcolor").val().split("#")[1]; if (bg.length == 3) { bg = bg[0] + bg[0] + bg[1] + bg[1] + bg[2] + bg[2]; } var fg = $("#fgcolor").val().split("#")[1]; if (fg.length == 3) { fg = fg[0] + fg[0] + fg[1] + fg[1] + fg[2] + fg[2]; } var gc = $("#gccolor").val().split("#")[1]; if (gc.length == 3) { gc = gc[0] + gc[0] + gc[1] + gc[1] + gc[2] + gc[2]; } var el = $("#el").val(); var w = $("#wwidth").val(); var m = $("#mwidth").val(); var pt = $("#ptcolor").val().split("#")[1]; if (pt.length == 3) { pt = pt[0] + pt[0] + pt[1] + pt[1] + pt[2] + pt[2]; } var inpt = $("#inptcolor").val().split("#")[1]; if (inpt.length == 3) { inpt = inpt[0] + inpt[0] + inpt[1] + inpt[1] + inpt[2] + inpt[2]; } var logo = $("#imgPre").attr("src"); var txtInfo = $("#txtInfo").val(); var html = "http://qr.liantu.com/api.php?bg=" + bg + "&fg=" + fg + "&gc=" + gc + "&el=" + el + "&w=" + w + "&m=" + m + "&pt=" + pt + "&inpt=" + inpt + "&logo=" + logo + "&text=" + txtInfo; $("#imgPath").attr("src", html); }); }); </script>
源码下载：链接：http://pan.baidu.com/s/1hq49URi 密码：c043（内含离线生成二维码js文件）
