效果?

安裝

npm i qrcode

使用?

import QRCode from 'qrcode';

?具體生成過程

<template>
    <div class="banner-login">
      <img :src="qrDataUrl" />
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import QRCode from 'qrcode';
import { getNewCode } from '@/api/sefatyCenter';
import { useRouter } from 'vue-router';
const router = useRouter();
const goPath = (r) => {
  router.push({
    path: r
  });
};



let qrDataUrl = ref();
let secret = ref('');
const getCode = async () => {
  const {
    data: { data }
  } = await getNewCode();
  console.log(data);
  secret.value = data.secret;
  //直接生成二維碼不做處理
  // qrDataUrl.value = await QRCode.toDataURL(data.uri);

  // 創(chuàng)建一個新的canvas元素來容納二維碼
  const qrCodeCanvas = document.createElement('canvas');
  qrCodeCanvas.width = 200; // 根據(jù)需要調(diào)整二維碼尺寸
  qrCodeCanvas.height = 200;

  // 生成二維碼到新的canvas元素
  await QRCode.toCanvas(qrCodeCanvas, data.uri);

  // 在二維碼中間添加logo
  const ctx = qrCodeCanvas.getContext('2d');
  const logo = new Image();
  logo.src = require('@/assets/images/logo.png');
  logo.onload = function () {
    const logoSize = qrCodeCanvas.width * 0.26; // 根據(jù)需要調(diào)整logo尺寸
    const logoX = (qrCodeCanvas.width - logoSize) / 2;
    const logoY = (qrCodeCanvas.height - logoSize) / 2;

    // 繪制二維碼
    ctx.drawImage(logo, logoX, logoY, logoSize, logoSize);

    // 將生成的二維碼插入到頁面中
    qrDataUrl.value = qrCodeCanvas.toDataURL();
  };
};
getCode();


</script>

我們首先創(chuàng)建一個新的canvas元素，用于容納生成的二維碼。然后，使用QRCode.toCanvas方法將二維碼生成到新的canvas元素中。

接下來，在logo.onload事件處理程序中，我們創(chuàng)建一個Image對象來加載logo圖像，并在二維碼中間繪制logo。最后，將生成的二維碼轉(zhuǎn)換為數(shù)據(jù)URL，并將其賦值給qrDataUrl變量。

封裝?

<template>
  <div class="qr-code" ref="container">
    <img :src="qrCodeData"/>
  </div>
</template>
<script>
import { ref, onMounted, watch,nextTick } from 'vue';
import QRCode from "qrcode";
export default {
  name: "Qrcode",
  props: {
    modelValue: {
      type: String,
      default: ''
    }
  },
  setup(props, {emit}) {
    const canvas = ref(null)
    const container = ref(null)
    const qrCodeData = ref("data:image/png;base64,")
    watch(() => props.modelValue, (val, oldVal) => {
      render()
    });
    const render = async () => {
      if (props.modelVal == '') return

      await nextTick()
      // QRCode.toCanvas(
      //   canvas.value,
      //   props.modelValue ,
      //   {
      //     width: 150,
      //     height: 150
      //   },
      //   error => {console.log(error)}
      // )
      QRCode.toDataURL(props.modelValue, {  margin: 1, errorCorrectionLevel: 'H'}, (err, url) => {
        qrCodeData.value = url
        
      })
    }
    onMounted(() => {
      render()
    })
    return {
      render,
      canvas,
      container,
      qrCodeData
    }
  },
}
</script>
<style lang="less" scoped>
.qr-code {
  width: 200px;
  height: 200px;
  background-image: url('@/assets/images/wallet/qr-code-bg.svg');
  background-size: 100% 100%;
  margin: 38px 0 30px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    width: 170px;
    height: 170px;
  }
}
</style>

?文章來源地址http://www.zghlxwxcb.cn/news/detail-687054.html

到了這里，關(guān)于Vue中使用qrcode實現(xiàn)渲染二維碼中間添加自定義logo-demo的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！