基于jquery.qrcode.js制作二维码并提供下载

最新推荐文章于 2022-11-08 10:57:36 发布

hanq2016

最新推荐文章于 2022-11-08 10:57:36 发布

阅读量1.1k

点赞数

分类专栏： js 文章标签： javascript jquery html5 es6 css

本文链接：https://blog.csdn.net/hanq2016/article/details/114303314

版权

js 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>基于jquery.qrcode.js制作二维码</title>
    <style>
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }
      html {
        font-size: 100px;
      }
      body {
        font-size: 16px;
      }
      .app {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 7.5rem;
        height: 5rem;
        margin: 0 auto;
        background-color: rgb(211, 240, 237);
      }
      .app > h1 {
        text-align: center;
        padding: 0.5rem 0 0.3rem 0;
        font-family: Courier, "arial block", "微软雅黑";
      }
      .box {
        display: flex;
        align-items: center;
        justify-content: space-around;
      }

      .box .options,
      .box #output {
        width: 100%;
        /* border: 1px solid black; */
        padding: 0.2rem 0.8rem 0.4rem 0.8rem;
      }

      .box #output {
        text-align: center;
      }
      .box .options #img_params div,
      .box .options #img_params h3 {
        padding: 0.05rem;
      }
      .box .options #img_params div input {
        height: 0.3rem;
        width: 2.1rem;
        outline: none;
        border: none;
        border: 1px solid rgb(155, 154, 154);
        border-radius: 3px;
        padding-left: 0.1rem;
        margin-top: 0.05rem;
      }
      .box .options #img_params div select {
        height: 0.3rem;
        width: 1.2rem;
        outline: none;
        border: none;
        padding-left: 0.1rem;
        border: 1px solid rgb(155, 154, 154);
        border-radius: 3px;
        margin-top: 0.05rem;
      }
      .box .options #img_params div button {
        outline: none;
        border: none;
        color: #fff;
        background-color: #583a78;
        width: 1rem;
        height: 0.35rem;
        border-radius: 0.05rem;
      }
      .box .options #img_params div button:hover {
        background-color: darkblue;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div class="app">
      <h1>制作一张二维码图片，并可以提供下载</h1>
      <div class="box">
        <!-- 用户的选择操作 -->
        <div class="options">
          <div id="img_params">
            <h3>请设置二维码</h3>
            <div>
              <lebal>网址名称:</lebal>
              <br />
              <input type="text" class="img_name" placeholder="输入网址" />
            </div>
            <div>
              <lebal>下载名称:</lebal>
              <br />
              <input type="text" class="title" placeholder="输入名称" />
            </div>
            <div>
              <lebal>下载类型:</lebal>
              <br />
              <select class="img_type">
                <option value="png" selected>png</option>
                <option value="jpg">jpg</option>
                <option value="bmp">bmp</option>
              </select>
            </div>
            <div>
              <button class="create">点击生成</button>
              <button class="download">点击下载</button>
            </div>
          </div>
        </div>
        <!-- 生成图片的容器 -->
        <div id="output"></div>
      </div>
    </div>
    <script src="https://list-of-jquery.oss-cn-hangzhou.aliyuncs.com/jquery-3.5.1.js"></script>
    <script src="https://list-of-jquery.oss-cn-hangzhou.aliyuncs.com/jquery.qrcode.min.js"></script>
    <script>
      jQuery(function () {
        //点击产生二维码
        jQuery(".create").click(function () {
          jQuery("#output").empty();
          generatCode(jQuery(".img_name").val());
        });
        //点击二维码，进行下载
        jQuery(".download").click(function () {
          let url = output.children[0];
          if (!url) {
            return alert("请先生成二维码！");
          }
          let title = jQuery(".title").val();
          let type = jQuery(".img_type").val();
          if (type === "png") {
            downLoad(saveAsPNG(url), title);
          } else if (type === "jpg") {
            downLoad(saveAsJPG(url), title);
          } else {
            downLoad(saveAsBMP(url), title);
          }
        });
      });

      /**
       * 产生二维码
       * @date 2021-03-03
       * @returns {any}
       */
      function generatCode(url) {
        jQuery("#output").qrcode({
          //设置渲染方式，有table和canvas，使用canvas方式渲染性能相对来说比较好
          render: "canvas",
          //扫描二维码后显示的内容,可以直接填一个网址，扫描二维码后自动跳向该链接
          text: url,
          //二维码的宽度
          width: 200,
          height: 200,
          //二维码的后景色
          background: "#ffffff",
          //二维码的前景色
          foreground: "#000000",
          //可以修改的内部小图片，建议使用正方形图片，在使用的过程中修改图片资源即可
          src: "bootcss.png",
          //内部小图片的大小
          imgWidth: 50,
          imgHeight: 50,
        });
      }

      /**
       * 下载二维码图片
       * @date 2021-03-03
       * @param {any} url
       * @param {any} title
       * @returns {any}
       */
      function downLoad(url, title) {
        var oA = document.createElement("a");
        // 设置下载的文件名，默认是'下载'
        oA.download = title;
        oA.href = url;
        //拼接a标签
        document.body.appendChild(oA);
        //模拟点击
        oA.click();
        // 下载之后把创建的元素删除
        oA.remove();
      }

      // 保存成png格式的图片
      function saveAsPNG(canvas) {
        return canvas.toDataURL("image/png");
      }

      // 保存成jpg格式的图片
      function saveAsJPG(canvas) {
        return canvas.toDataURL("image/jpeg");
      }

      // 保存成bmp格式的图片  目前浏览器支持性不好
      function saveAsBMP(canvas) {
        return canvas.toDataURL("image/bmp");
      }
    </script>
  </body>
</html>

hanq2016

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
4
评论
基于jquery.qrcode.js制作二维码并提供下载

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>基于jquery.qrcode.js制作二维码</title> <style> * { padding: 0; margin: 0; box-sizing: border-box; } ht.
复制链接

扫一扫