设置图片传送url数据

最新推荐文章于 2024-07-14 14:31:02 发布

小七Zzzz

最新推荐文章于 2024-07-14 14:31:02 发布

阅读量429

点赞数

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>

    <style type="text/css">
        #divQRCode {
            display: inline-block;
            vertical-align: middle;
            border: none 2px blue;
            margin: auto;
        }

        #divLeft {
            margin-left:32px;
            margin-top:16px;
            border: none 2px blue;
            vertical-align: top;
        }


        #btnFlush {
            cursor: pointer;
        }

        div img {
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <td>
                <div id="divLeft">
                    <p> 图片样式选择</p>
                    <select id="selectImageType">
                        <optgroup label="图片格式">
                            <option value="jpg" selected="selected">jpg</option>
                            <option value="png">png</option>
                        </optgroup>
                    </select>

                    <br />

                    <p>图片大小设置</p>
                    <input type='text' id="inputScale" />
                    <br />
                    <br/>
                    <input id="btnFlush" type="button" value="刷新" />
                </div>
            </td>
            <td>
                <div id="divQRCode">
                    <img src="下载.png" id="imgQRCode" />
                </div>
            </td>
        </tr>
    </table>




</body>

</html>

<script type="text/javascript">
    var text = document.getElementById("inputScale");
    text.onkeyup = function () {
        //updateQRCode();       
        this.value = this.value.replace(/\D/g, '');
        if (text.value > 100) {
            text.value = 100;
        }
        if (text.value < 1) {
            text.value = 1;
        }

    }

    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]); return null;
    }

    function extractParamFromUrl() {
        var qrcodeServer = getUrlParam("qrcodeServer");
        var callbackServer = getUrlParam("url");
        var scale = getUrlParam("scale");
        var id = getUrlParam("id");
        var action = getUrlParam("action");

        console.log("qrcodeServer = " + qrcodeServer);
        console.log("callbackServer = " + callbackServer);
        console.log("scale = " + scale);
        console.log("id = " + id);
        console.log("action = " + action);

        return {
            qrcodeServer: qrcodeServer,
            callbackServer: callbackServer,
            scale: scale,
            id: id,
            action: action
        };
    }

    var params = extractParamFromUrl();

    initPage(params);

    function initPage(params) {
        //
        var inputScale = document.getElementById("inputScale");
        inputScale.value = params.scale;

        //
        var imgQRCode = document.getElementById("imgQRCode");
        var urlQRCode = makeQRCodeURL(params.qrcodeServer, params.callbackServer, params.scale, params.id, params.action, "jpg");
        imgQRCode.setAttribute('src', urlQRCode);
    }

    function makeQRCodeURL(qrcodeServer, callbackServer, scale, id, action, imageType) {
        var url = qrcodeServer + "url=" + callbackServer + "&action=" + action + "&scale=" + scale + "&id=" + id + "&img=" + imageType;
        return url;
    }

    document.getElementById("btnFlush").addEventListener("click", updateQRCode);
    document.getElementById("inputScale").addEventListener("propertychange", updateQRCode);

    function updateQRCode() {
        //scale
        var scale = document.getElementById("inputScale").value;
        if (scale > 100 || scale < 1) {
            scale = 5;
        }

        //imageType
        var imageType = document.getElementById("selectImageType").value;

        //
        var imgQRCode = document.getElementById("imgQRCode");
        var urlQRCode = makeQRCodeURL(params.qrcodeServer, params.callbackServer, scale, params.id, params.action, imageType);
        imgQRCode.setAttribute('src', urlQRCode);
        console.log("urlQRCode = " + urlQRCode);
    }
</script>