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

前言：

虽然在很多时候，生成二维码的操作都是由后端进行操作。但是在某些特定的场景里，难免会需要前端来完成链接生成二维码的操作，在这里我们提供一个插件来完成，这个插件就是qrcode。

官方地址

安装：

npm install --save qrcode

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

ES6/ES7示例：

import QRCode from 'qrcode'// With promisesQRCode.toDataURL('I am a pony!')  .then(url => {    console.log(url)  })  .catch(err => {    console.error(err)  })// With async/awaitconst generateQR = async text => {  try {    console.log(await QRCode.toDataURL(text))  } catch (err) {    console.error(err)  }}

相关常用API：

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

作用：根据链接生成二维码并转换成一个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>

页面效果展示：

扫码展示：

console打印：

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

作用：链接生成二维码并转换成一个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>

页面效果：

扫码展示：

console打印：

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

作用：根据链接生成二维码放置在指定的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>

 页面展示：

扫码展示：

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})