hustcc-G2Plot-QRCode
/
index.html

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<title>G2Plot-QRCode</title>
<style>
  body {
    padding: 16px;
  }
  .container {
    display: flex;
    flex-direction: column;
  }
  .container .header {
    flex-basis: 32px;
  }

  .container .generator {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
  }

  .container .generator .config .config-item {
    margin-bottom: 8px;
  }

  .container .generator .config .config-item * {
    width: 320px;
  }

  .container .generator .config .config-item.level * {
    width: auto;
  }

  #qrcode-result {
    margin-left: 16px;
  }

  canvas {
    border: 1px solid #999;
  }

  .github-url {
      color: #a6619c;
      position: fixed;
      top: 16px;
      right: 16px;
      text-decoration: none;
    }
</style>
</head>
<body>
<a class="github-url" href="https://github.com/hustcc/g2plot-qrcode">g2plot-qrcode</a>
<div class="container">
  <!-- header -->
  <div class="header">
    <h2>G2Plot QRCode Generator</h2>
  </div>

  <div class="generator">
    <div class="config">
      <div class="text config-item">
        <div class="column col-3">
          <div>Text:</div>
        </div>
        <div class="column">
          <textarea onchange="onChange('data', this.value)">Hello, g2plot qrcode!</textarea>
        </div>
      </div>

      <div class="size config-item">
        <div class="column col-3">
          <div>Size:</div>
        </div>
        <div class="column">
          <input type="range" min="64" max="400" value="240" onchange="onChange('size', this.value)">
        </div>
      </div>

      <div class="padding config-item">
        <div class="column col-3">
          <div>Padding:</div>
        </div>
        <div class="column">
          <input type="range" min="0" max="16" value="8" onchange="onChange('padding', this.value)">
        </div>
      </div>

      <div class="level config-item">
        <div>CorrectLevel:</div>
        <label><input name="correctLevel" type="radio" value="L" onchange="onChange('correctLevel', this.value)" /> L </label>
        <label><input name="correctLevel" type="radio" value="M" onchange="onChange('correctLevel', this.value)" /> M </label>
        <label><input name="correctLevel" type="radio" value="H" checked onchange="onChange('correctLevel', this.value)" /> H </label>
        <label><input name="correctLevel" type="radio" value="Q" onchange="onChange('correctLevel', this.value)" /> Q </label>
      </div>

      <div class="foreground-color config-item">
        <div>Foreground</div>
        <input type="color" value="#000" onchange="onChange('foregroundColor', this.value)">
      </div>

      <div class="background-color config-item">
        <div>Background</div>
        <input type="color" value="#fff" onchange="onChange('backgroundColor', this.value)">
      </div>
    </div>
    <div class="qrcode" id="qrcode-result"></div>
  </div>
</div>
<script src="https://unpkg.com/@antv/g2plot@2"></script>
<script src="https://unpkg.com/g2plot-qrcode@1"></script>
<script>
  // 第一次默认渲染
  var qrcodePlot = new G2Plot.P('qrcode-result', {
  }, G2PlotQRCode.adaptor, {
    ...G2PlotQRCode.defaultOptions,
    width: 240,
    height: 240,
  });

  qrcodePlot.render();

  function onChange(key, value) {
    switch(key) {
      case 'size':
        value = Number(value);
        qrcodePlot.changeSize(value, value);
        break;
      case 'padding':
        value = Number(value);
      case 'data':
      case 'correctLevel':
      case 'backgroundColor':
      case 'foregroundColor':
        qrcodePlot.update({ [key]: value });
        break;
    }
  }
</script>

<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- sorry for ad -->
<ins class="adsbygoogle"
      style="display:block"
      data-ad-client="ca-pub-7292810486004926"
      data-ad-slot="7806394673"
      data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</body>
</html>