自己的笔记之qrcode

qrcode是一个生成二维码库

CDN引入：

  <script src="https://cdn.jsdelivr.net/npm/qrcode/build/qrcode.min.js"></script>

npm安装

npm install vue-qrcode

vue项目应用

全局注册组件main.ts
import { createApp, ref } from "vue";
import VueQrcode from "vue-qrcode";
import App from "./App.vue";


const app = createApp(App);
app.component("vue-qrcode", VueQrcode);

其他组件使用
    <vue-qrcode 
        :value="qrCodeValue"  
        :width="qrCodeSize"  
        :margin="1" :color="{ dark:'#000000'}">
    </vue-qrcode>
    


局部使用
import VueQrcode from "vue-qrcode";

    <VueQrcode        
        :value="qrCodeValue"  
        :width="qrCodeSize"  
        :margin="1" :color="{ dark:'#000000'}">
    </VueQrcode>

ts:
 const qrCodeValue = ref("");
 qrCodeValue.value = window.location.href

原生项目应用-用于下载二维码

  QRCode.toDataURL方法是返回一个包含二维码图像数据的URL，通常是一个base64编码的png格式图像。
  
  可以直接用在img标签的src属性值，可以用来下载二维码图片操作
  
  方法：
        <div class="qrcode">
          <img src="" id="qrcodeImg" alt="">
        </div>

js:
    function qrcode(url) {
        QRCode.toDataURL(url, { margin: 0 }, function (error, image) {
            if (error) {
                console.error(error);
            } else {
                $("#qrcodeImg").attr("src", image);
            }
        });
    }
    qrcode(window.location.href);

在网页中显示二维码

QRCode.toCanvas将生成的二维码直接绘制HTML<canvas>元素上，可以直接在网页中显示二维码，也可以对<canvas>进行操作（如：样式动画）
html：
    <canvas id="myCanvas"></canvas>
js:
    const canvas = document.getElementById('myCanvas');
    
    QRCode.toCanvas(canvas, 'http://example.com', function (error) {
      if (error) console.error(error);
      console.log('QR code rendered to canvas element.');
    });