jquery qart带图案二维码生成效果代码

代码语言:html

所属分类:其他

代码描述:jquery qart带图案二维码生成效果代码

代码标签: 图案 二维 生成 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh">

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

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style type="text/css">
        body { width: 100%; padding: 0; background-color: #FFFFF6; }
        h1, h2 { text-align: center; }
        input[type=text] { display: block; width: 380px; height: 30px; margin: 0 auto; font-size: 14pt; }
        input[type=file] { display: block; width: 380px; height: 30px; margin: 0 auto; }
        label { display: block; width: 380px; height: 30px; margin: 0 auto; }
        .group { width: 400px; height: 195px; margin: 0 auto; }
        .clear { clear: both; }
        #qr { float: left; width: 195px; height: 195px; margin: 0 auto; margin-right: 10px; }
        #image { float: left; width: 195px; height: 195px; margin: 0 auto; margin-top: 12px; }
        #combine { width: 195px; height: 195px; margin: 0 auto; }
    </style>
</head>

<body>
    <div class="container">
        <header class="header">
            <h1>生成带指定图像效果js二维码 </h1>
        </header>
        <div class="content ">
            <h2>From</h2>
            <input id="value" type="text" value="http://www.bfw.wiki">
            <input id="file" type="file">
            <label> 黑白:
          <input type="radio" value="threshold" name="filter" checked>
          彩色:
          <input type="radio" value="color" name="filter">
        </label>
            <div class="group">
                <div id="qr"></div>
                <div id="image"><img src="//repo.bfw.wiki/bfwrepo/image/6098ff67cddfe.png" width="171"></div>
                <div class="clear"></div>
            </div>
            <h2>To</h2>
            <div id="combine"></div>
        </div>
    </div>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/qrcode.1.0.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/qart.min.js"></script&.........完整代码请登录后点击上方下载按钮下载查看

网友评论0