前端方案：根据链接天生二维码
前言：虽然在很多时候，天生二维码的操作都是由后端举行操作。但是在某些特定的场景里，不免会必要前端来完成链接天生二维码的操作，在这里我们提供一个插件来完成，这个插件就是qrcode。
官方地址
安装：
npm install --save qrcode // ts声明
npm i --save-dev @types/qrcode ES6/ES7示例：
import QRCode from 'qrcode'
// With promises
QRCode.toDataURL('I am a pony!')
.then(url => {
console.log(url)
})
.catch(err => {
console.error(err)
})
// With async/await
const generateQR = async text => {
try {
console.log(await QRCode.toDataURL(text))
} catch (err) {
console.error(err)
}
} 相干常用API：
toDataURL(text, , )
作用：根据链接天生二维码并转换成一个base64的图片地址。返回一个包罗QR码图像体现的数据URI。目前只适用于image/png类型。（options选填）
import QRCode from 'qrcode';
QRCode.toDataURL('I am a pony!', function (err, url) {
console.log(url) //base64图片地址
}) vue示例：
<template>
<div>
<h1>二维码</h1>
<img
:src="imageUrl"
mode="scaleToFill"
/>
</div>
</template>
<script setup>
import { ref } from "vue";
import QRCode from 'qrcode'
const imageUrl = ref('');
(
function getQrcode() {
QRCode.toDataURL('I am a pony!')
.then(url => {
console.log(url)
imageUrl.value = url
})
.catch(err => {
console.error(err)
})
}
)()
</script>
页面效果展示：
https://i-blog.csdnimg.cn/direct/7b8cf807a3b5419eb245bb76872a69ad.png
扫码展示：
https://i-blog.csdnimg.cn/direct/333a48ca7af7475381307836fff4b2e0.png
console打印：
https://i-blog.csdnimg.cn/direct/f987b0390e28404a924cb0101df12d9c.png
toString(text, , )
作用：链接天生二维码并转换成一个svg标具名符串。返回QR码的字符串体现形式。（options选填）
import QRCode from 'qrcode';
QRCode.toString('http://www.google.com', function (err, string) {
if (err) throw err
console.log(string)//svg字符串
}) vue示例：
<template>
<div>
<h1>二维码</h1>
<div v-html="imageUrl" style="width: 100px; height: 100px"></div>
</div>
</template>
<script setup>
import { ref } from "vue";
import QRCode from 'qrcode'
const imageUrl = ref('');
(
function getQrcode() {
QRCode.toString('http://www.google.com',
function (err, string) {
if (err) throw err
imageUrl.value = string
console.log(string)//svg字符串
})
}
)()
</script>
页面效果：
https://i-blog.csdnimg.cn/direct/888ebba669154cc588ef69b14bc1d3bc.png
扫码展示：
https://i-blog.csdnimg.cn/direct/0342f6823d20476d8bfdbcc5a9200788.png
console打印：
https://i-blog.csdnimg.cn/direct/d1222431195145daa9e68f8295ed02c7.png
toCanvas(canvas, text, , )
作用：根据链接天生二维码放置在指定的canvas标签上（options选填）
import QRCode from 'qrcode';
QRCode.toCanvas(document.getElementById('canvas'), 'http://www.google.com',
function (error) {
if (error) throw error;
console.log('success!');
}); vue示例：
<template>
<canvas id="canvas"></canvas>
</template>
<script setup>
import { onMounted } from 'vue'
import QRCode from 'qrcode';
onMounted(() => {
const options = { // 设置二维码的参数，例如大小、边距等
width: 200,
height: 200,
margin: 2,
};
(
function getQrcode() {
QRCode.toCanvas(
document.getElementById('canvas'),
'http://www.google.com',
options,
function (error) {
if (error) throw error;
console.log('success!');
});
}
)()
})
</script> 页面展示：
https://i-blog.csdnimg.cn/direct/b1a04a88ac7c497c9504f83b2365a44e.png
扫码展示：
https://i-blog.csdnimg.cn/direct/0342f6823d20476d8bfdbcc5a9200788.png
options配置项（可选配）
示例：
import QRCode from 'qrcode'
var options = {
errorCorrectionLevel: 'H',
margin: 1,
color: {
dark:"#010599FF",
light:"#FFBF60FF"
}
}
QRCode.toDataURL('http://www.google.com', options,
function (err, url) {
if (err) throw err
var img = document.getElementById('image')
img.src = url
}) 二维码选项类型描述versionNumber二维码版本。假如未指定，将计算更符合的值。errorCorrectionLevelString纠错级别。
可能的值为 或 。low, medium, quartile, high,L, M, Q, HmaskPatternNumber用于遮罩符号的掩码图案。
可能的值为 0, 1, 2, 3, 4, 5, 6, 7
假如未指定，将计算更符合的值。toSJISFuncFunction在内部用于将汉字转换为其 Shift JIS 值的帮助程序函数。
假如您必要支持汉字模式，请提供此功能。
渲染器选项类型描述marginNumber 类型：Number
默认：4
定义安静区应有多宽。
smallBoolean 默认：false
仅与终端渲染器相干。输出较小的二维码。
scaleNumber 默认：4
比例因子。值 体现每个模块 1px（斑点）。1
widthNumber逼迫输出图像的特定宽度。
假如宽度太小而无法包罗qr符号，则此选项将被忽略。
优先于规模。color.darkString 默认：#000000ff
深色模块的颜色。值必须采用十六进制格式 （RGBA）。
注意：深色应该总是比淡色深。
color.lightString 默认：#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企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]