jgril 2024-05-26 17:12 采纳率: 83.3%
浏览 9
已结题

生成的QRCode圖片加上下載按鈕

想生成的 QRCode 图片增加一个"下载图片"按钮

qrcode.min.js下载
https://blog.csdn.net/m0_63064861/article/details/131091499

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QRCode</title>
</head>
<style>
    body{text-align: center;}
</style>
<body>
    <label>輸入網址<input id="url" type="text" value="https://baidu.com/"></label> <br>

    <label>寬度<input id="width" type="number" value="128"></label> <br>
    <label>高度<input id="height" type="number" value="128"></label> <br>
    <label>顏色<input id="colorDark" type="color" value="#e44444"></label> <br>
    <label>背景顏色<input id="colorLight" type="color" value="#ffffff"></label> <br>
    <label>容錯等級 
        <select id="correctLevel">
            <option value="1">L</option>
            <option value="0">M</option>
            <option value="3">Q</option>
            <option value="2">H</option>
        </select>
    </label> <br>
    <br>
    <button onclick="generate()">生成</button><br><br>

    <div id="qrcode" style="display: flex;justify-content: center;"></div>

    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
    <script>
        function generate(){
            document.querySelectorAll("#qrcode *").forEach(item => item.remove());

            var qrcode = new QRCode(document.getElementById("qrcode"), {
                text: document.querySelector("#url").value,
                width: document.querySelector("#width").value,
                height: document.querySelector("#height").value,
                colorDark : document.querySelector("#colorDark").value,
                colorLight : document.querySelector("#colorLight").value,
                correctLevel : parseInt(document.querySelector("#correctLevel").value)
            });
        }

        console.log(QRCode.CorrectLevel)

        generate();
      </script>
</body>
</html>
  • 写回答

24条回答 默认 最新

  • 专家-郭老师 Java领域新星创作者 2024-05-26 17:13
    关注

    🕒下午好，题主！目前：🟢[在线]
    📢参考通义千问、由郭老师整理提供！
    📣今日诗号：落花人独立，微雨燕双飞。

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

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>QRCode</title>
</head>

<style>
  body {
    text-align: center;
  }
</style>

<body>
  <label>輸入網址
    <input id="url" type="text" value="https://baidu.com/" />
  </label>
  <br />
  <label>寬度
    <input id="width" type="number" value="128" />
  </label>
  <br />
  <label>高度
    <input id="height" type="number" value="128" />
  </label>
  <br />
  <label>顏色
    <input id="colorDark" type="color" value="#e44444" />
  </label>
  <br />
  <label>背景顏色
    <input id="colorLight" type="color" value="#ffffff" />
  </label>
  <br />
  <label>容錯等級
    <select id="correctLevel">
      <option value="1">L</option>
      <option value="0">M</option>
      <option value="3">Q</option>
      <option value="2">H</option>
    </select>
  </label>
  <br />
  <br />
  <button onclick="generate()">生成</button>
  <button onclick="download()">下載</button>
  <br />
  <br />
  <div id="qrcode" style="display: flex;justify-content: center;"></div>
  <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
  <script>
    function generate() {
      document.querySelectorAll("#qrcode *").forEach(item => item.remove());
      var qrcode = new QRCode(document.getElementById("qrcode"), {
        text: document.querySelector("#url").value,
        width: document.querySelector("#width").value,
        height: document.querySelector("#height").value,
        colorDark: document.querySelector("#colorDark").value,
        colorLight: document.querySelector("#colorLight").value,
        correctLevel: parseInt(document.querySelector("#correctLevel").value),
      });
    }

    function download() {
      const canvas = document.querySelector('canvas');
      const url = canvas.toDataURL('image/png');
      const a = document.createElement('a');
      a.href = url;
      a.download = 'qr-code.png';
      document.body.appendChild(a);
      a.click();
      a.remove();
    }

    generate();
  </script>
</body>

</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(23条)

报告相同问题？

问题事件

  • 系统已结题 6月8日
  • 已采纳回答 5月31日
  • 创建了问题 5月26日

悬赏问题

  • ¥200 如何使用postGis实现最短领规划？
  • ¥15 pyinstaller打包错误
  • ¥20 cesm的气溶胶排放文件
  • ¥15 逐月累计，月份不连续，补齐月份
  • ¥15 应用简单的Python代码完成一个学生成绩管理系统
  • ¥15 用matlab求微分方程初值问题
  • ¥15 vscode下编写第三方库opencv与pcl代码时没有代码提示
  • ¥15 能够跑通不报错，如何解决？(标签-matlab)
  • ¥15 MOS在RDS较大，频率高时开关波形异常
  • ¥15 SCENIC分析报错求解答