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

前言:

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

官方地址

安装:

复制代码
npm install --save qrcode
javascript 复制代码
// ts声明
npm i --save-dev @types/qrcode

ES6/ES7示例:

javascript 复制代码
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, [options], [cb(error, url)])

作用:根据链接生成二维码并转换成一个base64的图片地址。返回一个包含QR码图像表示的数据URI。目前只适用于image/png类型。(options选填

javascript 复制代码
import QRCode from 'qrcode';

QRCode.toDataURL('I am a pony!', function (err, url) {
  console.log(url) //base64图片地址
})

vue示例:

javascript 复制代码
<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选填

javascript 复制代码
import QRCode from 'qrcode';

QRCode.toString('http://www.google.com', function (err, string) {
  if (err) throw err
  console.log(string)//svg字符串
})

vue示例:

javascript 复制代码
<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选填

javascript 复制代码
 import QRCode from 'qrcode';

 QRCode.toCanvas(document.getElementById('canvas'), 'http://www.google.com', 
  function (error) {
    if (error) throw error;
    console.log('success!');
  });

vue示例:

javascript 复制代码
<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配置项(可选配)

示例:

javascript 复制代码
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
})

|----------------------|----------|---------------------------------------------------------------------------|
| 二维码选项 | 类型 | 描述 |
| 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)。 |

相关推荐
小桥风满袖3 分钟前
极简三分钟ES6 - ES9中for await of
前端·javascript
半花20 分钟前
i18n国际语言化配置
前端
编程贝多芬23 分钟前
Promise 的场景和最佳实践
前端·javascript
Asort24 分钟前
JavaScript 从零开始(四):基础语法详解——从变量声明到数据类型的完全指南
前端·javascript
木木jio26 分钟前
前端大文件分片上传 —— 基于 React 的工程化实现
前端·javascript
南雨北斗30 分钟前
JS的对象属性存储器
前端
Lotzinfly30 分钟前
12个TypeScript奇淫技巧你需要掌握😏😏😏
前端·javascript·面试
一个大苹果31 分钟前
setTimeout延迟超过2^31立即执行?揭秘JavaScript定时器的隐藏边界
javascript
开源之眼35 分钟前
React中,useState和useReducer有什么区别
前端
普郎特1 小时前
"不再迷惑!用'血缘关系'彻底搞懂JavaScript原型链机制"
前端·javascript