前言

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

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

1、瀏覽器支持

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

2、優(yōu)點

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

2）輕量級：qrcode.js 是一個輕量級的庫，體積小，易于引入到項目中，不會顯著增加網(wǎng)頁加載時間。

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

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

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

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

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

8）自定義擴展：雖然原始庫可能不支持一些高級特性（如Logo添加），但因為是開源項目，開發(fā)者可以根據(jù)需要對源碼進行修改和擴展來滿足個性化需求。

3、缺點

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

如果將用中文來生成二維碼，然后用微信掃描生成的二維碼會看到如下提示：

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

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

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

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

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

4、相關(guān)方法

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

• 瀏覽器端

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

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

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

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

• 服務(wù)端

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

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

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

5、安裝及使用示例

在vue項目中使用，先安裝：npm install --save qrcode

// vue2項目使用示例
<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項目使用示例
<template>
  <a-button type="primary" @click="handleGetQRCode">
    vue3獲取qrcode生成的二維碼-簡單版
  </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", // 可選，容錯級別，值有 L（低）、M（中）、Q（高）、H（最高），默認(rèn)為H
    type: "image/jpeg", 	// 可選，生成的二維碼類型
    quality: 0.3, 			// 可選，二維碼質(zhì)量
    margin: 5, 				// 可選，二維碼留白邊距1
    color: {
      dark: "#0A7AFF", 	// 可選，前景色，格式必須是十六進制的，如果不是則會報錯，比如：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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！