前言：

雖然在很多時(shí)候，生成二維碼的操作都是由后端進(jìn)行操作。但是在某些特定的場(chǎng)景里，難免會(huì)需要前端來(lái)完成鏈接生成二維碼的操作，在這里我們提供一個(gè)插件來(lái)完成，這個(gè)插件就是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)
  }
}

相關(guān)常用API：

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

作用：根據(jù)鏈接生成二維碼并轉(zhuǎn)換成一個(gè)base64的圖片地址。返回一個(gè)包含QR碼圖像表示的數(shù)據(jù)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>

頁(yè)面效果展示：

掃碼展示：

console打印：

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

作用：鏈接生成二維碼并轉(zhuǎn)換成一個(gè)svg標(biāo)簽字符串。返回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>

頁(yè)面效果：

掃碼展示：

console打印：

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

作用：根據(jù)鏈接生成二維碼放置在指定的canvas標(biāo)簽上（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 = { // 設(shè)置二維碼的參數(shù)，例如大小、邊距等
    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>

 頁(yè)面展示：

掃碼展示：

options配置項(xiàng)（可選配）

示例：

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

拓展

二維碼的優(yōu)缺點(diǎn)？

二維碼（QR Code）是一種二維條碼，具有廣泛的應(yīng)用。以下是二維碼的優(yōu)缺點(diǎn)：

優(yōu)點(diǎn)：

信息容量大：二維碼可以存儲(chǔ)大量的信息，包括文本、網(wǎng)址、電話號(hào)碼、電子郵件地址等。

易于掃描：二維碼可以通過(guò)手機(jī)攝像頭輕松掃描，無(wú)需復(fù)雜的輸入。

便攜性：二維碼可以打印在名片、廣告、產(chǎn)品包裝上，方便攜帶和分享。

兼容性強(qiáng)：二維碼可以兼容多種設(shè)備和操作系統(tǒng)，包括智能手機(jī)、平板電腦和電腦。

安全性高：二維碼可以加密信息，保護(hù)數(shù)據(jù)安全。

易于生成和打印：有許多在線工具和軟件可以生成二維碼，并且可以輕松打印出來(lái)。

缺點(diǎn)：

易損壞：二維碼如果被污損或磨損，可能無(wú)法被正確掃描。

隱私問(wèn)題：二維碼可能包含敏感信息，如果被濫用，可能會(huì)帶來(lái)隱私泄露的風(fēng)險(xiǎn)。

依賴網(wǎng)絡(luò)：二維碼中的某些信息（如網(wǎng)址）可能需要網(wǎng)絡(luò)連接才能訪問(wèn)，這在某些情況下可能受限。

成本：生成和打印大量二維碼可能需要一定的成本。

掃描設(shè)備要求：雖然大多數(shù)現(xiàn)代智能手機(jī)都支持二維碼掃描，但一些舊設(shè)備可能不支持。

二維碼的發(fā)展歷史

二維碼的發(fā)展歷史可以追溯到20世紀(jì)90年代初期，當(dāng)時(shí)日本Denso Wave公司為了克服傳統(tǒng)條形碼的數(shù)據(jù)存儲(chǔ)限制而開發(fā)了QR碼（Quick Response Code）。以下是二維碼發(fā)展的關(guān)鍵時(shí)間點(diǎn)和里程碑：

1994年：Denso Wave的工程師原昌宏（Masahiro Hara）領(lǐng)導(dǎo)的小團(tuán)隊(duì)發(fā)明了QR碼。QR碼設(shè)計(jì)初衷是為了提高汽車制造業(yè)中零件追蹤的速度和準(zhǔn)確性，并且能夠存儲(chǔ)更多的數(shù)據(jù)。

1990年代中期：隨著移動(dòng)設(shè)備攝像頭技術(shù)的進(jìn)步，QR碼開始被用于更廣泛的應(yīng)用場(chǎng)景，如營(yíng)銷、廣告等領(lǐng)域。QR碼的特點(diǎn)是高密度編碼和強(qiáng)大的錯(cuò)誤糾正能力，這使得它即使部分損壞也可以被正確讀取。

2000年左右：QR碼逐漸在全球范圍內(nèi)獲得認(rèn)可，并成為ISO國(guó)際標(biāo)準(zhǔn)的一部分。這一時(shí)期，QR碼不僅在日本而且在世界其他地區(qū)也得到了廣泛應(yīng)用，特別是在東亞地區(qū)。

2010年代：隨著智能手機(jī)的普及，QR碼的應(yīng)用進(jìn)一步擴(kuò)展到了日常生活的各個(gè)角落，包括社交媒體分享、移動(dòng)支付、快遞追蹤、活動(dòng)門票等。在中國(guó)，支付寶和微信支付推動(dòng)了二維碼支付系統(tǒng)的流行，極大地改變了人們的消費(fèi)習(xí)慣。

2020年代：進(jìn)入這個(gè)十年后，二維碼已經(jīng)成為全球不可或缺的技術(shù)工具之一，尤其是在新冠疫情期間，無(wú)接觸式服務(wù)需求激增，二維碼在健康碼、疫苗接種證明等方面發(fā)揮了重要作用。此外，二維碼還在不斷進(jìn)化，例如通過(guò)加密增強(qiáng)安全性，以及與物聯(lián)網(wǎng)(IoT)結(jié)合實(shí)現(xiàn)更多智能化應(yīng)用。

總之，從最初的一個(gè)內(nèi)部項(xiàng)目到如今幾乎無(wú)處不在的存在，二維碼的發(fā)展反映了信息技術(shù)和社會(huì)生活方式的巨大變遷。未來(lái)，隨著技術(shù)進(jìn)步，我們可以期待二維碼會(huì)有更多創(chuàng)新性的應(yīng)用和發(fā)展。 

總結(jié)

到此這篇關(guān)于前端根據(jù)鏈接生成二維碼的文章就介紹到這了,更多相關(guān)前端根據(jù)鏈接生成二維碼內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論