qrcode：基于JavaScript的二维码生成库，浏览器支持情况如何？-东山笔记

你知道吗？这里有一款二维码制作工具，它的功能相当全面。然而，它也有一些小缺陷。接下来，我会为大家详细介绍这些情况。

功能亮点大揭秘

这个二维码生成库以HTML5绘图技术为核心，无需借助其他库，只要浏览器兼容HTML5及DOM操作即可运行，包括IE6至IE10在内的众多流行浏览器均能支持。此外，它体积小巧，属于轻量级产品，引入到项目中不会显著延长网页的加载时长。

使用它后，你会觉得它的API设计得很简单，转换文本成二维码仅需几行代码，而且还能方便地调整纠错级别和大小等参数，操作起来非常便捷。

跨平台实用先锋

这个库凭借HTML5或DOM元素的绘图功能，实现了出色的跨平台兼容性；不论是桌面还是移动端的现代浏览器，都能顺畅使用。此外，它能在客户端即时生成内容，对动态信息进行实时更新；例如，网页上不断更新的数据二维码，也能随时进行相应调整。

它无需上传或保存预先生成的二维码图像，这显著降低了文件存储空间的占用及维护工作量；同时，该功能与网站其他部分紧密结合，便于轻松嵌入网页的各个部分，从而提高了用户的整体使用感受。

自定义扩展优势

尽管原始库可能存在某些功能上的欠缺，然而作为开源项目，开发者们能够依据实际需求对源代码进行修改和拓展。例如，当遇到高级特性不被支持时，开发者可以通过自行调整来满足特定需求，从而显著增强了库的定制能力。

以Logo的添加为例，始版本可能并未提供这项功能，然而开发者亲自操作即可完成，从而为二维码增添个性特色。

中文编码难题

不过，这个库存在一些不足之处。它的原始版本并不支持中文的直接编码功能。在处理非ASCII字符时，用户先将中文内容进行URL编码或者进行其他形式的转码。这样的操作对于许多希望直接生成中文二维码的用户来说，无疑增加了额外的步骤，也提高了操作难度。

若在网页上展示含有中文内容的二维码，若不进行转换处理，便无法成功构建出相应的二维码图案。

Logo 及兼容性问题

原插件不支持中文直接编码，且未提供将Logo图像集成到二维码中心的选项，这导致生成的二维码缺少了个性化展示的部分。此外，不同浏览器间存在兼容性问题，例如在较老版本的IE浏览器中，生成的二维码图片尺寸可能与现代浏览器存在差异，给开发者带来了适配上的挑战。

当我们在开发一个适用于多个浏览器的网站时，会发现一个问题变得尤为明显，那就是二维码在不同浏览器中的显示效果存在差异。

尺寸及保存方法

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

对于较大的数据量或者更高级别的纠错要求，生成的二维码会变得相当大。这是因为二维码是通过 HTML5 或 DOM 元素进行绘制的，所以可能会受到设备屏幕尺寸或渲染能力的限制，进而使得二维码的部分区域无法完全显示。这个库提供了多种保存二维码的方式，例如返回数据 URI、保存为文件或转换为文件流等，不过目前后两种方法仅支持 png 格式的文件。

在使用这类二维码生成软件时，你更倾向于哪些功能？若你觉得这篇文章对你有所帮助，不妨点个赞或者将它分享出去！

// 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（最高），默认为H
    type: "image/jpeg", 	// 可选，生成的二维码类型
    quality: 0.3, 			// 可选，二维码质量
    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>