基于Jquery的多彩二维码的生成

Demo效果图:
基于Jquery的多彩二维码的生成
源代码:
@{
    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=" 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文件）
基于Jquery的多彩二维码的生成

相关推荐
