前言

qrcode 是一個(gè)基于JavaScript的二維碼生成庫(kù)，主要是通過(guò)獲取 DOM 的標(biāo)簽，再通過(guò) HTML5 Canvas 繪制而成，不依賴(lài)任何庫(kù)。

官方文檔：https://www.npmjs.com/package/qrcode

1、瀏覽器支持

qrcode理論上支持所有現(xiàn)代瀏覽器以及部分老版本瀏覽器。具體而言，只要這些瀏覽器支持HTML5 Canvas和/或DOM操作，就可以使用 qrcode 來(lái)生成二維碼，具體的有：IE6~10， Chrome， Firefox，Safari，Mobile Safari，Opera，Android， Windows Mobile，Microsoft Edge等。

2、優(yōu)點(diǎn)

1）客戶(hù)端實(shí)時(shí)生成：無(wú)需服務(wù)器端干預(yù)，可以在瀏覽器端直接生成二維碼，減少服務(wù)器負(fù)載和網(wǎng)絡(luò)傳輸成本，使得動(dòng)態(tài)內(nèi)容的二維碼生成更加便捷。例如：根據(jù)用戶(hù)輸入或當(dāng)前頁(yè)面URL生成二維碼。

2）輕量級(jí)：qrcode.js 是一個(gè)輕量級(jí)的庫(kù)，體積小，易于引入到項(xiàng)目中，不會(huì)顯著增加網(wǎng)頁(yè)加載時(shí)間。

3）易用性：API設(shè)計(jì)簡(jiǎn)單，只需要幾行代碼就可以將文本轉(zhuǎn)換為二維碼，并且可以靈活地控制生成二維碼的各種參數(shù)（如糾錯(cuò)級(jí)別、大小等）。

4）跨平臺(tái)兼容性：基于HTML5 Canvas或DOM元素繪制，適用于大部分現(xiàn)代瀏覽器，包括桌面端和移動(dòng)端。

5）動(dòng)態(tài)更新：由于是在客戶(hù)端生成，因此能夠?qū)崿F(xiàn)動(dòng)態(tài)內(nèi)容的實(shí)時(shí)更新，比如在網(wǎng)頁(yè)上顯示不斷變化的數(shù)據(jù)對(duì)應(yīng)的二維碼。

6）無(wú)額外圖片資源：不需要上傳或存儲(chǔ)預(yù)生成的二維碼圖片，減少了文件存儲(chǔ)空間的需求和維護(hù)工作。

7）可嵌入Web應(yīng)用：與網(wǎng)站其他功能集成緊密，可以方便地將生成的二維碼內(nèi)嵌到網(wǎng)頁(yè)的任何位置，實(shí)現(xiàn)良好的用戶(hù)體驗(yàn)。

8）自定義擴(kuò)展：雖然原始庫(kù)可能不支持一些高級(jí)特性（如Logo添加），但因?yàn)槭情_(kāi)源項(xiàng)目，開(kāi)發(fā)者可以根據(jù)需要對(duì)源碼進(jìn)行修改和擴(kuò)展來(lái)滿(mǎn)足個(gè)性化需求。

3、缺點(diǎn)

1）不支持中文直接編碼：根據(jù)提及的信息，原始版本的 jquery.qrcode 插件可能不支持直接將包含中文的文本轉(zhuǎn)換為二維碼。在處理非ASCII字符時(shí)，需要先對(duì)中文內(nèi)容進(jìn)行URL編碼或其他轉(zhuǎn)碼操作。

如果將用中文來(lái)生成二維碼，然后用微信掃描生成的二維碼會(huì)看到如下提示：

2）LOGO添加功能缺失：該插件本身并未提供集成Logo圖像到二維碼中心的功能。如果需要帶有Logo的二維碼，需要額外開(kāi)發(fā)或?qū)ふ移渌С执斯δ艿膸?kù)。

3）兼容性問(wèn)題：在不同瀏覽器間可能存在兼容性差異，比如在較老版本的IE瀏覽器（如IE7/8）中生成的二維碼圖片尺寸可能會(huì)與現(xiàn)代瀏覽器（如Chrome、Firefox等）顯示的不同，這可能需要開(kāi)發(fā)者針對(duì)特定環(huán)境做特殊處理。

4）尺寸和分辨率限制：對(duì)于較大的數(shù)據(jù)量或者更高級(jí)別的糾錯(cuò)級(jí)別，生成的二維碼可能會(huì)變得很大，并且由于是基于HTML5 Canvas或DOM元素繪制，可能受限于設(shè)備屏幕大小或渲染能力，導(dǎo)致部分區(qū)域無(wú)法完整顯示。

5）性能優(yōu)化不足：在某些低性能設(shè)備上，尤其是在大量生成或頻繁更新二維碼的情況下，JS實(shí)時(shí)生成可能比服務(wù)器端生成和返回靜態(tài)圖片的方式效率更低。

6）功能相對(duì)基礎(chǔ)：相比于一些更全面的庫(kù)，qrcode 提供的功能較為基礎(chǔ)，例如缺乏高級(jí)定制選項(xiàng)，如顏色自定義、樣式美化等。

4、相關(guān)方法

關(guān)于API的詳細(xì)使用方法和Option配置項(xiàng)，可參看：https://www.npmjs.com/package/qrcode#api

• 瀏覽器端

? 1）create(text, [options])，創(chuàng)建二維碼并返回一個(gè)qrcode對(duì)象。

? 2）toCanvas(text, [options], [cb(error, canvas)]), 將二維碼繪制到畫(huà)布上。

? 3）toDataURL(canvasElement, text, [options], [cb(error, url)])，返回一個(gè)數(shù)據(jù) URI，其中包含二維碼圖像的格式，這種方法也是使用 Canvas作為畫(huà)布來(lái)生成數(shù)據(jù) URI。

? 4）toString(text, [options], [cb(error, string)])，返回二維碼的字符串格式。

• 服務(wù)端

? 同上的4個(gè)方法，此外還多出如下2個(gè)方法：

? 5）toFile(path, text, [options], [cb(error)])，將二維碼保存為文件，如果沒(méi)有指定 options.type，將從文件擴(kuò)展名猜測(cè)格式，可識(shí)別的擴(kuò)展名是 png、 svg、 txt。

? 6）toFileStream(stream, text, [options])，將二維碼圖像變成文件流，目前只能使用 png 格式。

5、安裝及使用示例

在vue項(xiàng)目中使用，先安裝：npm install --save qrcode

// vue2項(xiàng)目使用示例
<template>
  <div>
     <el-button type="primary" @click="handleGetQRCode">
        vue2中獲取qrcode生成的二維碼
     </el-button>
     <div>
        <canvas id="QRCode"></canvas>
     </div>
	<div>
</template>

<script>
import QRCode from "qrcode";

export default {
  data() {
    return {
      qrcode: ""
    };
  },
  methods: {
    async handleGetQRCode() {
      const element = document.getElementById("QRCode");
      const url = "https://blog.csdn.net/ganyingxie123456";
      QRCode.toCanvas(element, url);
    }
  }
};

結(jié)果：

// vue3項(xiàng)目使用示例
<template>
  <a-button type="primary" @click="handleGetQRCode">
    vue3獲取qrcode生成的二維碼-簡(jiǎn)單版
  </a-button>
  <div class="qrcode">
    <img :src="qrcode" />
  </div>

  <a-button type="primary" @click="handleGetQRCode2">
    qrcode生成的二維碼-增加配置版
  </a-button>
  <div class="qrcode">
    <img :src="qrcode2" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import QRCode from "qrcode";

const url = "https://blog.csdn.net/ganyingxie123456";

const qrcode = ref("");
const handleGetQRCode = async () => {
  qrcode.value = await QRCode.toDataURL(url);
};

const qrcode2 = ref("");
const handleGetQRCode2 = () => {
  const option = {
    errorCorrectionLevel: "H", // 可選，容錯(cuò)級(jí)別，值有 L（低）、M（中）、Q（高）、H（最高），默認(rèn)為H
    type: "image/jpeg", 	// 可選，生成的二維碼類(lèi)型
    quality: 0.3, 			// 可選，二維碼質(zhì)量
    margin: 5, 				// 可選，二維碼留白邊距1
    color: {
      dark: "#0A7AFF", 	// 可選，前景色，格式必須是十六進(jìn)制的，如果不是則會(huì)報(bào)錯(cuò)，比如：blue或rgb(255,245,255)等
      light: "#F73128", // 可選，背景色，格式同上
    },
  };
  QRCode.toDataURL(url, option, (error: any, resultUrl: any) => {
    if (error) {
      throw error;
    }
    qrcode2.value = resultUrl;
  });
};
</script>

<style scoped>
.qrcode {
  width: 200px;
  height: 200px;
}
</style>

結(jié)果如下：

OK，至此結(jié)束～

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

最新評(píng)論