canvas生成二维码附带icon并实现下载

最新推荐文章于 2024-06-28 17:37:52 发布

moguPeople

最新推荐文章于 2024-06-28 17:37:52 发布

阅读量457

点赞数

分类专栏： canvas 文章标签： canvas qrcode

本文链接：https://blog.youkuaiyun.com/fly_wugui/article/details/106811914

版权

该博客介绍了如何使用canvas在生成二维码的同时添加图标，并实现二维码图片的下载功能。作者提到，使用常规的qrcode库无法直接添加图标，因此需要自行处理。通过示例代码展示了实现这一功能的具体步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

canvas生成二维码附带icon并实现下载

https://blog.youkuaiyun.com/chy555chy/article/details/85785819

利用 qrcode 生成二维码是不带 icon 的，去网上查找解决方案需要修改源码。
所以只好自己开搞了
效果如下：
带有icon的二维码
代码如下

<template>
  <div>
    <!-- 二维码和icon -->
    <img :src="rediusIconSrc" alt="ICON">
    <img :src="qrCodeSrc" alt="qrcode">
    <img :src="iconCodeSrc" alt="IconAndQrcode">
    <button @click="getQrcode">下载</button>
  </div>
</template>
<script>
import QRCode from 'qrcode'; // 需安装 qrcode 插件;
export default {
   
  data() {
   
    return {
   
      qrCodeSrc: '',
      rediusIconSrc: '',
      iconCodeSrc: '',
      qrCodeW: '200',
      qrCodeH: '200',
      codeContext: 'text123',
      iconScale: 0.2 // icon 占二维码的比例;
    };
  },
  mounted() {
   
    this.getCanvas(this.codeContext);
  },
  methods: {
   
    getQrcode() {
   
      let _a = document.createElement('a');
      _a.href = this.iconCodeSrc;
      _a.download = '带有 icon 的二维码';
      _a.click();
    },
    getCanvas(codeContext, option = {
   errorCorrectionLevel: 'H', margin: 1})

最低0.47元/天解锁文章