如何将指定二维码图片转换为Base64格式用于QRCode.js？

需求说明 #

我有一张二维码图片，希望将其转换为Base64字符串，用于以下qrcodejs代码中：

<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<body>
  <div id="qrcode"></div>
  <script>
    const base64String = "MTIzNA==";
    const qrcode = new QRCode("qrcode", {
      text: base64String,
      width: 256,
      height: 256,
    });
  </script>
</body>

遇到的问题：所有二维码解码工具解码后均为乱码；使用Zgnix得到以下十六进制结果，但难以还原原始二维码：

40 0b 94 95 04 25 a0 00   18 6a 06 36 46 06 26 26
06 05 46 30 09 20 c0 ce   a0 14 08 2c 54 98 68 1c
1a 58 a0 10 e6 c9 4a f7   38 13 08 c6 d2 f3 97 3d
62 a4 30 15 10 61 cc 0b   e0 1b bb 81 d5 0d c5 ef
07 5a bd d3 a9 16 a7 43   98 78 2c 5d 79 df 98 03
44 ce dc c9 9b 38 09 4c   08 61 79 66 69 94 76 f5
f6 9f 91 2e 23 0f 15 39   51 b4 86 cc 15 73 b0 ef
3c b5 f2 21 26 e5 aa b7   0a ab db 9c b2 0e 09 15
89 29 c9 19 99 71 e9 09   ae 79 39 99 e5 10 23 2e
13 f1 0d 87 e3 dd 46 fe   b7 3e 6a cc 30 2a c0 e1
25 8e ac fe 0b 8f 26 13   42 bb fe a9 1e 48 fb 74
b3 c7 1f 90 80 6f ef ff   f7 70 90 00 ec 11 ec 11
ec 11 ec 11 ec 11 ec 11   ec 11 ec 11 ec 11 ec 11
ec 11 ec 11 ec 11 ec 11

操作步骤 #

1. 明确核心误区 #

你之前混淆了两个概念：

• 二维码内容解码：提取二维码存储的信息（乱码说明二维码存的是二进制数据，而非可读文本）
• 图片文件转Base64：将二维码图片本身的二进制数据编码为Base64字符串（这才是你需要的操作）

2. 图片转Base64的方法 #

方法一：浏览器控制台直接处理

打开浏览器F12进入开发者工具，切换到Console标签，执行以下代码：

const imgUrl = "https://files.mastodon.social/media_attachments/files/110/611/748/348/381/359/original/2845afd0827a1cfd.png";
fetch(imgUrl)
  .then(res => res.blob())
  .then(blob => {
    const reader = new FileReader();
    reader.onload = () => {
      console.log(reader.result); // 输出带data:image/png;base64,前缀的完整Base64字符串
    };
    reader.readAsDataURL(blob);
  });

复制控制台输出的结果即可使用。

方法二：本地Python脚本处理

如果已下载图片到本地，用以下脚本生成Base64：

import base64

with open("qrcode.png", "rb") as img_file:
    base64_str = base64.b64encode(img_file.read()).decode('utf-8')
    # 生成带data URI前缀的字符串，可直接用于img标签
    base64_uri = f"data:image/png;base64,{base64_str}"
    print(base64_uri)

方法三：利用Zgnix的十六进制结果转换

将Zgnix返回的十六进制数据转成Base64：

import base64

# 清理十六进制字符串的空格和换行
hex_str = "40 0b 94 95 04 25 a0 00   18 6a 06 36 46 06 26 26 06 05 46 30 09 20 c0 ce   a0 14 08 2c 54 98 68 1c 1a 58 a0 10 e6 c9 4a f7   38 13 08 c6 d2 f3 97 3d 62 a4 30 15 10 61 cc 0b   e0 1b bb 81 d5 0d c5 ef 07 5a bd d3 a9 16 a7 43   98 78 2c 5d 79 df 98 03 44 ce dc c9 9b 38 09 4c   08 61 79 66 69 94 76 f5 f6 9f 91 2e 23 0f 15 39   51 b4 86 cc 15 73 b0 ef 3c b5 f2 21 26 e5 aa b7   0a ab db 9c b2 0e 09 15 89 29 c9 19 99 71 e9 09   ae 79 39 99 e5 10 23 2e 13 f1 0d 87 e3 dd 46 fe   b7 3e 6a cc 30 2a c0 e1 25 8e ac fe 0b 8f 26 13   42 bb fe a9 1e 48 fb 74 b3 c7 1f 90 80 6f ef ff   f7 70 90 00 ec 11 ec 11 ec 11 ec 11 ec 11 ec 11   ec 11 ec 11 ec 11 ec 11 ec 11 ec 11 ec 11 ec 11".replace(" ", "").replace("\n", "")

binary_data = bytes.fromhex(hex_str)
base64_str = base64.b64encode(binary_data).decode('utf-8')
base64_uri = f"data:image/png;base64,{base64_str}"
print(base64_uri)

3. 代码使用注意事项 #

如果你的需求是展示这张二维码，无需使用qrcodejs，直接用<img>标签更简单：

<img src="这里替换为转好的Base64字符串" width="256" height="256" />

如果确实需要用qrcodejs生成和原二维码内容一致的二维码，由于原二维码存储的是二进制数据，qrcodejs的text参数无法直接处理，建议直接展示图片而非重新生成。

内容的提问来源于stack exchange，提问作者repeekyraid cero