前端qrcode生成二维码详解

---

  

---

前言

qrcode 是一个基于JavaScript的二维码生成库，主要是通过获取 DOM 的标签，再通过 HTML5 Canvas 绘制而成，不依靠任何库。
官方文档：https://www.npmjs.com/package/qrcode
1、欣赏器支持

qrcode理论上支持所有现代欣赏器以及部分老版本欣赏器。具体而言，只要这些欣赏器支持HTML5 Canvas和/或DOM操纵，就可以利用 qrcode 来生成二维码，具体的有：IE6~10， Chrome， Firefox，Safari，Mobile Safari，Opera，Android， Windows Mobile，Microsoft Edge等。
2、优点

1）客户端及时生成：无需服务器端干预，可以在欣赏器端直接生成二维码，镌汰服务器负载和网络传输本钱，使得动态内容的二维码生成更加便捷。比方：根据用户输入或当前页面URL生成二维码。
2）轻量级：qrcode.js 是一个轻量级的库，体积小，易于引入到项目中，不会显著增长网页加载时间。
3）易用性：API设计简单，只需要几行代码就可以将文本转换为二维码，并且可以灵活地控制生成二维码的各种参数（如纠错级别、巨细等）。
4）跨平台兼容性：基于HTML5 Canvas或DOM元素绘制，实用于大部分现代欣赏器，包括桌面端和移动端。
5）动态更新：由于是在客户端生成，因此可以或许实现动态内容的及时更新，好比在网页上显示不停变革的数据对应的二维码。
6）无额外图片资源：不需要上传或存储预生成的二维码图片，镌汰了文件存储空间的需求和维护工作。
7）可嵌入Web应用：与网站其他功能集成紧密，可以方便地将生成的二维码内嵌到网页的任何位置，实现良好的用户体验。
8）自定义扩展：固然原始库可能不支持一些高级特性（如Logo添加），但因为是开源项目，开发者可以根据需要对源码进行修改和扩展来满足个性化需求。
3、缺点

1）不支持中文直接编码：根据提及的信息，原始版本的 jquery.qrcode 插件可能不支持直接将包含中文的文本转换为二维码。在处理非ASCII字符时，需要先对中文内容进行URL编码或其他转码操纵。
如果将用中文来生成二维码，然后用微信扫描生成的二维码会看到如下提示：

2）LOGO添加功能缺失：该插件自己并未提供集成Logo图像到二维码中央的功能。如果需要带有Logo的二维码，需要额外开发或寻找其他支持此功能的库。
3）兼容性题目：在不同欣赏器间可能存在兼容性差异，好比在较老版本的IE欣赏器（如IE7/8）中生成的二维码图片尺寸可能会与现代欣赏器（如Chrome、Firefox等）显示的不同，这可能需要开发者针对特定环境做特别处理。
4）尺寸和分辨率限制：对于较大的数据量大概更高级别的纠错级别，生成的二维码可能会变得很大，并且由于是基于HTML5 Canvas或DOM元素绘制，可能受限于装备屏幕巨细或渲染能力，导致部分地区无法完整显示。
5）性能优化不敷：在某些低性能装备上，尤其是在大量生成或频仍更新二维码的情况下，JS及时生成可能比服务器端生成和返回静态图片的方式效率更低。
6）功能相对底子：相比于一些更全面的库，qrcode 提供的功能较为底子，比方缺乏高级定制选项，如颜色自定义、样式美化等。
4、相关方法

关于API的具体利用方法和Option配置项，可参看：https://www.npmjs.com/package/qrcode#api

• 欣赏器端
  

​ 1）create(text, [options])，创建二维码并返回一个qrcode对象。
​ 2）toCanvas(text, [options], [cb(error, canvas)]), 将二维码绘制到画布上。
​ 3）toDataURL(canvasElement, text, [options], [cb(error, url)])，返回一个数据 URI，其中包含二维码图像的格式，这种方法也是利用 Canvas作为画布来生成数据 URI。
​ 4）toString(text, [options], [cb(error, string)])，返回二维码的字符串格式。

• 服务端
  

​ 同上的4个方法，此外还多出如下2个方法：
​ 5）toFile(path, text, [options], [cb(error)])，将二维码生存为文件，如果没有指定 options.type，将从文件扩展名猜测格式，可识别的扩展名是 png、 svg、 txt。
​ 6）toFileStream(stream, text, [options])，将二维码图像酿成文件流，现在只能利用 png 格式。
5、安装及利用示例

在vue项目中利用，先安装：npm install --save qrcode

1. // vue2项目使用示例
2. <template>
3.   <div>
4.      <el-button type="primary" @click="handleGetQRCode">
5.         vue2中获取qrcode生成的二维码
6.      </el-button>
7.      <div>
8.         <canvas id="QRCode"></canvas>
9.      </div>
10.         <div>
11. </template>
13. <script>
14. import QRCode from "qrcode";
16. export default {
17.   data() {
18.     return {
19.       qrcode: ""
20.     };
21.   },
22.   methods: {
23.     async handleGetQRCode() {
24.       const element = document.getElementById("QRCode");
25.       const url = "https://blog.csdn.net/ganyingxie123456";
26.       QRCode.toCanvas(element, url);
27.     }
28.   }
29. };

复制代码

结果：

1. // vue3项目使用示例
2. <template>
3.   <a-button type="primary" @click="handleGetQRCode">
4.     vue3获取qrcode生成的二维码-简单版
5.   </a-button>
6.   <div class="qrcode">
7.     <img :src="qrcode" />
8.   </div>
10.   <a-button type="primary" @click="handleGetQRCode2">
11.     qrcode生成的二维码-增加配置版
12.   </a-button>
13.   <div class="qrcode">
14.     <img :src="qrcode2" />
15.   </div>
16. </template>
18. <script lang="ts" setup>
19. import { ref } from "vue";
20. import QRCode from "qrcode";
22. const url = "https://blog.csdn.net/ganyingxie123456";
24. const qrcode = ref("");
25. const handleGetQRCode = async () => {
26.   qrcode.value = await QRCode.toDataURL(url);
27. };
29. const qrcode2 = ref("");
30. const handleGetQRCode2 = () => {
31.   const option = {
32.     errorCorrectionLevel: "H", // 可选，容错级别，值有 L（低）、M（中）、Q（高）、H（最高），默认为H
33.     type: "image/jpeg",         // 可选，生成的二维码类型
34.     quality: 0.3,                         // 可选，二维码质量
35.     margin: 5,                                 // 可选，二维码留白边距1
36.     color: {
37.       dark: "#0A7AFF",         // 可选，前景色，格式必须是十六进制的，如果不是则会报错，比如：blue或rgb(255,245,255)等
38.       light: "#F73128", // 可选，背景色，格式同上
39.     },
40.   };
41.   QRCode.toDataURL(url, option, (error: any, resultUrl: any) => {
42.     if (error) {
43.       throw error;
44.     }
45.     qrcode2.value = resultUrl;
46.   });
47. };
48. </script>
50. <style scoped>
51. .qrcode {
52.   width: 200px;
53.   height: 200px;
54. }
55. </style>

复制代码

结果如下：

OK，至此结束～

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。