前端方案：根据链接天生二维码

前言：

虽然在很多时候，天生二维码的操作都是由后端举行操作。但是在某些特定的场景里，不免会必要前端来完成链接天生二维码的操作，在这里我们提供一个插件来完成，这个插件就是qrcode。
官方地址
安装：

1. npm install --save qrcode

复制代码

1. // ts声明
2. npm i --save-dev @types/qrcode

复制代码

ES6/ES7示例：

1. import QRCode from 'qrcode'
3. // With promises
4. QRCode.toDataURL('I am a pony!')
5.   .then(url => {
6.     console.log(url)
7.   })
8.   .catch(err => {
9.     console.error(err)
10.   })
12. // With async/await
13. const generateQR = async text => {
14.   try {
15.     console.log(await QRCode.toDataURL(text))
16.   } catch (err) {
17.     console.error(err)
18.   }
19. }

复制代码

---

相干常用API：

toDataURL(text, [options], [cb(error, url)])

作用：根据链接天生二维码并转换成一个base64的图片地址。返回一个包罗QR码图像体现的数据URI。目前只适用于image/png类型。（options选填）

1. import QRCode from 'qrcode';
3. QRCode.toDataURL('I am a pony!', function (err, url) {
4.   console.log(url) //base64图片地址
5. })

复制代码

vue示例：

1. <template>
2.   <div>
3.     <h1>二维码</h1>
4.     <img
5.       :src="imageUrl"
6.       mode="scaleToFill"
7.     />
8.   </div>
9. </template>
11. <script setup>
12. import { ref } from "vue";
13. import QRCode from 'qrcode'
15. const imageUrl = ref('');
17. (
18.   function getQrcode() {
19.     QRCode.toDataURL('I am a pony!')
20.       .then(url => {
21.         console.log(url)
22.         imageUrl.value = url
23.       })
24.       .catch(err => {
25.         console.error(err)
26.       })
27.   }
28. )()
29. </script>

复制代码

页面效果展示：

扫码展示：

console打印：

---

toString(text, [options], [cb(error, string)])

作用：链接天生二维码并转换成一个svg标具名符串。返回QR码的字符串体现形式。（options选填）

1. import QRCode from 'qrcode';
3. QRCode.toString('http://www.google.com', function (err, string) {
4.   if (err) throw err
5.   console.log(string)//svg字符串
6. })

复制代码

vue示例： 

1. <template>
2.   <div>
3.     <h1>二维码</h1>
4.     <div v-html="imageUrl" style="width: 100px; height: 100px"></div>
5.   </div>
6. </template>
8. <script setup>
9. import { ref } from "vue";
10. import QRCode from 'qrcode'
12. const imageUrl = ref('');
14. (
15.   function getQrcode() {
16.     QRCode.toString('http://www.google.com',
17.     function (err, string) {
18.       if (err) throw err
19.       imageUrl.value = string
20.       console.log(string)//svg字符串
21.     })
22.   }
23. )()
24. </script>

复制代码

页面效果：

扫码展示：

console打印：

---

toCanvas(canvas, text, [options], [cb(error)])

作用：根据链接天生二维码放置在指定的canvas标签上（options选填）

1. import QRCode from 'qrcode';
3. QRCode.toCanvas(document.getElementById('canvas'), 'http://www.google.com',
4.   function (error) {
5.     if (error) throw error;
6.     console.log('success!');
7.   });

复制代码

vue示例：

1. <template>
2.   <canvas id="canvas"></canvas>
3. </template>
5. <script setup>
6. import { onMounted } from 'vue'
7. import QRCode from 'qrcode';
9. onMounted(() => {
11.   const options = { // 设置二维码的参数，例如大小、边距等
12.     width: 200,
13.     height: 200,
14.     margin: 2,
15.   };
17.   (
18.     function getQrcode() {
19.       QRCode.toCanvas(
20.         document.getElementById('canvas'),
21.         'http://www.google.com',
22.         options,
23.         function (error) {
24.           if (error) throw error;
25.           console.log('success!');
26.         });
27.     }
28.   )()
29. })
30. </script>

复制代码

 页面展示：

扫码展示：

options配置项（可选配）

示例：

1. import QRCode from 'qrcode'
3. var options = {
4.   errorCorrectionLevel: 'H',
5.   margin: 1,
6.   color: {
7.     dark:"#010599FF",
8.     light:"#FFBF60FF"
9.   }
10. }
12. QRCode.toDataURL('http://www.google.com', options,
13. function (err, url) {
14.   if (err) throw err
15.   var img = document.getElementById('image')
16.   img.src = url
17. })

复制代码

二维码选项	类型	描述
version	Number	二维码版本。假如未指定，将计算更符合的值。
errorCorrectionLevel	String	纠错级别。 可能的值为 或 。low, medium, quartile, high,L, M, Q, H
maskPattern	Number	用于遮罩符号的掩码图案。 可能的值为 0, 1, 2, 3, 4, 5, 6, 7 假如未指定，将计算更符合的值。
toSJISFunc	Function	在内部用于将汉字转换为其 Shift JIS 值的帮助程序函数。 假如您必要支持汉字模式，请提供此功能。

  

渲染器选项	类型	描述
margin	Number	类型：Number 默认：4 定义安静区应有多宽。
small	Boolean	默认：false 仅与终端渲染器相干。输出较小的二维码。
scale	Number	默认：4 比例因子。值 体现每个模块 1px（斑点）。1
width	Number	逼迫输出图像的特定宽度。 假如宽度太小而无法包罗qr符号，则此选项将被忽略。 优先于规模。
color.dark	String	默认：#000000ff 深色模块的颜色。值必须采用十六进制格式 （RGBA）。 注意：深色应该总是比淡色深。
color.light	String	默认：#ffffffff 灯光模块的颜色。值必须采用十六进制格式 （RGBA）。

 
 
 
 
 



 
 
 
 
 
 

拓展

二维码的优缺点？

二维码（QR Code）是一种二维条码，具有广泛的应用。以下是二维码的优缺点：
   长处：

  

• 信息容量大：二维码可以存储大量的信息，包罗文本、网址、电话号码、电子邮件地址等。
  
• 易于扫描：二维码可以通过手机摄像头轻松扫描，无需复杂的输入。
  
• 便携性：二维码可以打印在手刺、广告、产品包装上，方便携带和分享。
  
• 兼容性强：二维码可以兼容多种设备和操作系统，包罗智能手机、平板电脑和电脑。
  
• 安全性高：二维码可以加密信息，保护数据安全。
  
• 易于天生和打印：有许多在线工具和软件可以天生二维码，而且可以轻松打印出来。
  

  缺点：

  

• 易粉碎：二维码假如被污损或磨损，可能无法被精确扫描。
  
• 隐私问题：二维码可能包罗敏感信息，假如被滥用，可能会带来隐私泄漏的风险。
  
• 依赖网络：二维码中的某些信息（如网址）可能必要网络毗连才气访问，这在某些环境下可能受限。
  
• 成本：天生和打印大量二维码可能必要一定的成本。
  
• 扫描设备要求：虽然大多数现代智能手机都支持二维码扫描，但一些旧设备可能不支持。
  

  二维码的发展汗青

二维码的发展汗青可以追溯到20世纪90年代初期，当时日本Denso Wave公司为了克服传统条形码的数据存储限定而开发了QR码（Quick Response Code）。以下是二维码发展的关键时间点和里程碑：
   

• 1994年：Denso Wave的工程师原昌宏（Masahiro Hara）向导的小团队发明了QR码。QR码设计初衷是为了提高汽车制造业中零件追踪的速率和精确性，而且能够存储更多的数据。
  
• 1990年代中期：随着移动设备摄像头技术的进步，QR码开始被用于更广泛的应用场景，如营销、广告等范畴。QR码的特点是高密度编码和强盛的错误改正本领，这使得它纵然部分粉碎也可以被精确读取。
  
• 2000年左右：QR码逐渐在环球范围内获得承认，并成为ISO国际标准的一部分。这一时期，QR码不仅在日本而且在天下其他地域也得到了广泛应用，特别是在东亚地域。
  
• 2010年代：随着智能手机的遍及，QR码的应用进一步扩展到了日常生存的各个角落，包罗社交媒体分享、移动支付、快递追踪、活动门票等。在中国，支付宝和微信支付推动了二维码支付系统的盛行，极大地改变了人们的消耗习惯。
  
• 2020年代：进入这个十年后，二维码已经成为环球不可或缺的技术工具之一，尤其是在新冠疫情期间，无打仗式服务需求激增，二维码在康健码、疫苗接种证实等方面发挥了重要作用。此外，二维码还在不停进化，比方通过加密增强安全性，以及与物联网(IoT)联合实现更多智能化应用。
  

  总之，从最初的一个内部项目到如今几乎无处不在的存在，二维码的发展反映了信息技术和社会生存方式的巨大变迁。未来，随着技术进步，我们可以期待二维码会有更多创新性的应用和发展。 

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