Vue中使用qrcode实现渲染二维码中间添加自定义logo-demo-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue中使用qrcode实现渲染二维码中间添加自定义logo-demo。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

效果

Vue中使用qrcode实现渲染二维码中间添加自定义logo-demo,Vue,JavaScript,vue.js,javascript,前端

安装

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

  // 创建一个新的canvas元素来容纳二维码
  const qrCodeCanvas = document.createElement('canvas');
  qrCodeCanvas.width = 200; // 根据需要调整二维码尺寸
  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; // 根据需要调整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>

我们首先创建一个新的canvas元素，用于容纳生成的二维码。然后，使用QRCode.toCanvas方法将二维码生成到新的canvas元素中。

接下来，在logo.onload事件处理程序中，我们创建一个Image对象来加载logo图像，并在二维码中间绘制logo。最后，将生成的二维码转换为数据URL，并将其赋值给qrDataUrl变量。

封装

Vue中使用qrcode实现渲染二维码中间添加自定义logo-demo,Vue,JavaScript,vue.js,javascript,前端

<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>

文章来源地址https://www.toymoban.com/news/detail-687054.html

到了这里，关于Vue中使用qrcode实现渲染二维码中间添加自定义logo-demo的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！