利用 qrcode 在图片生成二维码

百度网盘下载: qrcode 提取码: ubax，详细文档说明：请查看

对比图

对比图

效果图

效果图

下载下来后我把他引入下面页面–qr.html（路径记得换成你自己的）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>利用 qrcode 在图片生成二维码</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #app {
      width: 100%;
      max-width: 7.5rem;
      margin: 0 auto;
    }

    #Original,
    #Qr {
      display: none;
    }

    #Poster {
      display: block;
      width: 100%;
    }
  </style>
  <script>
    !(function (doc, win) {
      var docEl = document.documentElement,
        resizeEvt =
          "orientationchange" in window ? "orientationchange" : "resize",
        recalc = function () {
          var clientWidth = docEl.clientWidth;
          if (!clientWidth) return;
          if (clientWidth >= 750) {
            docEl.style.fontSize = "100px";
          } else {
            docEl.style.fontSize = 100 * (clientWidth / 750) + "px";
          }
        };

      if (!doc.addEventListener) return;
      window.addEventListener(resizeEvt, recalc, false);
      document.addEventListener("DOMContentLoaded", recalc, false);
    })(document, window);
  </script>
</head>

<body>
  <div id="app">
    <canvas id="Original"></canvas>
    <canvas id="Qr"></canvas>
    <img id="Poster" data-src="http">
  </div>
  <script src="./qrcode.min.js"></script>
  <script>
    let img = new Image();
    img.src = './shenxianjiejie.jpg';
    img.onload = function () {
      let original = document.getElementById('Original');
      let context = original.getContext('2d');
      context.save(); // 保存当前环境
      original.setAttribute('width', this.width);
      original.setAttribute('height', this.height);
      // 向画布上绘制图片 
      context.drawImage(this, 0, 0, this.width, this.height);
      // 进行绘制
      context.restore();
      let qr = document.getElementById('Qr');
      // 二维码的内容
      let qrContent = '这里是文字，可以是链接';
      QRCode.toCanvas(qr, qrContent, (error) => {
        if (error) {
          console.error(error)
        }
        let image = new Image();
        image.src = qr.toDataURL('image?png');
        image.onload = function () {
          // 保存已绘制的图片
          context.save();
          // 绘制二维码的位置和大小
          context.drawImage(this, 40, 40, 200, 200);
          // 进行绘制
          context.restore();
          let poster = document.getElementById('Poster')
          poster.setAttribute('src', original.toDataURL('image/png'));
        }
      })
    }
  </script>
</body>

</html>

由于我这里引用是本地图片，所以需要搭建本地服务，我这里在 node 环境下搭建了简单的 express 服务

1
2
3
4
5
6
7
8
9
const express = require('express')
const server = express();
const port = 8496;

server.use(express.static('./'));

server.listen(port, _ => {
  console.log(`http://localhost:${port}`);
})

现在运行服务后直接访问 http://localhost:8496/qr.html

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！