帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

基于html5+canvas+js实现的在线生成二维码代码

帝国模板之家 2020-10-19 网页特效 评论

这是一款存js+html画布,实现的在线生成二维码插件。可设置的参数:二维码的值、大小、前景和背景色、级别。

代码如下:

<!DOCTYPE html>
<html lang="zh">
  <head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>基于html5+canvas+js生成二维码插件代码</title>
  <style>
html { height: 100%; font-family: sans-serif; }
body { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; height: calc(100% - 100px); background-color: #EFEFEF; }
*, :after, :before { box-sizing: border-box; }
main { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; height: 100%; }
main section { min-width: 250px; max-width: 50%; height: 100%; text-align: center; }
main img { border: 2px solid #fff; }
main form { padding: 25px 0 50px 0; text-align: left; }
main form label { display: block; margin-top: 10px; font-weight: bold; }
main form input,  main form select { width: 100%; }
 main form input:invalid {
 outline: 2px solid #f00;
 color: #f00;
}
  </style>
  </head>
  <body>
<main>
    <section> <img id="qrious">
    <form autocomplete="off">
        <label> value
        <input type="text" name="value" value="http://www.moyouyouw.cn/" spellcheck="false">
      </label>
        <label> size
        <input type="number" name="size" placeholder="100" min="100" max="1000" value="250">
      </label>
        <label> level
        <select name="level">
            <option value="L">L - 7% damage</option>
            <option value="M">M - 15% damage</option>
            <option value="Q">Q - 25% damage</option>
            <option value="H">H - 30% damage</option>
          </select>
      </label>
        <label> background
        <input type="color" name="background" value="#ffffff">
      </label>
        <label> foreground
        <input type="color" name="foreground" value="#000000">
      </label>
      </form>
  </section>
  </main>
<script src="dist/umd/qrious.js"></script> 
<script>
      (function() {
        var $background = document.querySelector('main form [name="background"]')
        var $foreground = document.querySelector('main form [name="foreground"]')
        var $level = document.querySelector('main form [name="level"]')
        var $section = document.querySelector('main section')
        var $size = document.querySelector('main form [name="size"]')
        var $value = document.querySelector('main form [name="value"]')

        var qr = window.qr = new QRious({
          element: document.getElementById('qrious'),
          size: 250,
          value: 'http://www.moyouyouw.cn/'
        })

        $background.addEventListener('change', function() {
          qr.background = $background.value || null
        })

        $foreground.addEventListener('change', function() {
          qr.foreground = $foreground.value || null
        })

        $level.addEventListener('change', function() {
          qr.level = $level.value
        })

        $size.addEventListener('change', function() {
          if (!$size.validity.valid) {
            return
          }

          qr.size = $size.value || null

          $section.style.minWidth = qr.size + 'px'
        })

        $value.addEventListener('input', function() {
          qr.value = $value.value
        })
      })()
    </script>
</body>
</html>
这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言