欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

前端根據(jù)鏈接生成二維碼的方案及相關(guān)常用API

 更新時間：2025年01月06日 09:08:17   作者：零凌林  
這篇文章主要介紹了qrcode插件的使用方法,包括ES6/ES7示例、常用API及Vue示例,同時還討論了二維碼的優(yōu)點和缺點,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

前言：

雖然在很多時候，生成二維碼的操作都是由后端進行操作。但是在某些特定的場景里，難免會需要前端來完成鏈接生成二維碼的操作，在這里我們提供一個插件來完成，這個插件就是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)換成一個base64的圖片地址。返回一個包含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>

頁面效果展示：

掃碼展示：

console打?。?/p>

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

作用：鏈接生成二維碼并轉(zhuǎn)換成一個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打?。?/p>

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

作用：根據(jù)鏈接生成二維碼放置在指定的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 = { // 設(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>

 頁面展示：

掃碼展示：

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, H
maskPatternNumber用于遮罩符號的掩碼圖案。
可能的值為 0, 1, 2, 3, 4, 5, 6, 7如果未指定，將計算更合適的值。
toSJISFuncFunction在內(nèi)部用于將漢字轉(zhuǎn)換為其 Shift JIS 值的幫助程序函數(shù)。
如果您需要支持漢字模式，請?zhí)峁┐斯δ堋?/td>
渲染器選項類型描述
marginNumber

類型：Number
默認：4

定義安靜區(qū)應(yīng)有多寬。

smallBoolean

默認：false

僅與終端渲染器相關(guān)。輸出較小的二維碼。

scaleNumber

默認：4

比例因子。值 表示每個模塊 1px（黑點）。1

widthNumber強制輸出圖像的特定寬度。
如果寬度太小而無法包含qr符號，則此選項將被忽略。
優(yōu)先于規(guī)模。
color.darkString

默認：#000000ff

深色模塊的顏色。值必須采用十六進制格式 （RGBA）。
注意：深色應(yīng)該總是比淺色深。

color.lightString

默認：#ffffffff

燈光模塊的顏色。值必須采用十六進制格式 （RGBA）。

拓展

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

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

優(yōu)點：

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

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

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

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

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

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

缺點：

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

隱私問題：二維碼可能包含敏感信息，如果被濫用，可能會帶來隱私泄露的風(fēng)險。

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

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

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

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

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

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

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

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

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

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

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

總結(jié)

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

相關(guān)文章

最新評論