Vue中两种生成二维码(带logo)并下载方式

这篇具有很好参考价值的文章主要介绍了Vue中两种生成二维码(带logo)并下载方式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.现在需要在页面中生成一个二维码,并附带上公司的logo

        生成的二维码需要显示logo,并且点击可以二维码可以下载保存,有两种方案供选择(vue-qr、qrcode

 2.vue-qr库使用(方案一)

npm i vue-qr@4.0.9

我的nodejs版本12.13.0,大家可以使用cnpm下载更好。

html代码:

<template>
  <div class="main">
    <div>
      <vue-qr 
        :text="codeText"    
        :size="150"
        :margin="20"
        colorDark="#333"
        backgroundColor="#eee"
        :logoSrc="lgoImg"
        logoScale="0.21"
        logoMargin="25px"
        :callback="getCode"
      ></vue-qr>
    </div>
  </div>
</template>

JS代码:

<script>
import VueQr from 'vue-qr'
export default {
  name:'QR',
  components:{VueQr},
  data() {
    return {
      codeText: 'https://blog.csdn.net/yuansusu_?spm=1000.2115.3001.53',
      lgoImg: require('../assets/111.png'),
    };
  },
  methods: {
    getCode(codeImg) {
      console.log('二维码图片', codeImg);
    },
  }
}
</script>
  1. text是要生成的内容
  2. size表示二维码的宽高,宽高一致
  3. margin二维码图像的外边距, 默认 20px
  4. colorDark实点的颜色
  5. backgroundColor背景颜色(背景图片使用bgSrcgifBgSrc)
  6. logoSrc嵌入中间的logo地址
  7. logoScale用于计算 LOGO 大小的值, 过大将导致解码失败, LOGO 尺寸计算公式 logoScale*(size-2*margin), 默认 0.2
  8. logoMargin设置LOGO 标识周围的空白边框, 默认为0
  9. callback生成的二维码 Data URI 可以在回调中取得,第一个参数为二维码 data URL, 第二个参数为 props 传过来的 qid(因为二维码生成是异步的,所以加个 id 用于排序)

官网文档:vue-qr - npm(文档是中文,可以放心食用)

 3.qrcode库使用并带下载方式(方案二)(推荐)

npm i qrcode@1.5.1

使用qecode配置的logo更为灵活,并且在不是vue项目中也能同样使用

html(部分)和css代码:

<div class="qr-code">
    <canvas 
      id="QRCode_header"
      ref="canvas"
      title="扫描二维码"
    ></canvas>
    <div class="mask-code" @click="saveCode">
      <i></i><span>保存二维码</span>
    </div>
</div>
<style scoped>
  .qr-code{
    display: flex;
    width:fit-content;
    width:-webkit-fit-content;
    width:-moz-fit-content;
    position: relative;
  }
  .qr-code:hover>div{
    z-index: 0;
  }
  .mask-code{
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0,0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: -1;
  }
  .mask-code i{
    display: inline-block;
    width: 25px;
    height: 25px;
    background-image: url(../assets/save_img.png);
    background-size: cover;
  }
  .mask-code span{
    color: white;
  }
</style>

可以将上面的内容封装到组件中,通过props来传递想要生成的内容

JS代码:

<script>
import QRCode from "qrcode"; //引入生成二维码插件
export default {
  name:'CodeS',
  props:{
    canvasWidth:{
      default:200,
      type:Number
    },
    canvasHeight:{
      default:200,
      type:Number
    },
    url:{
      default:'',
      type:String,
      required:true
    },
    logoUrl:{
      default:'',
      type:String,
      // required:true
    }
  },
  methods:{
    getQRCode() {
      let opts = {
          errorCorrectionLevel: "H",//容错级别,指二维码被遮挡可以扫出结果的区域比例
          type: "image/png",//生成的二维码类型
          quality: 0.3,//二维码质量
          margin: 5,//二维码留白边距
          width: this.canvasWidth,//宽
          height: this.canvasHeight,//高
          text: "1111",//二维码内容
          color: {
              light: "#eaeaea"//背景色
          }
      };
      // 将获取到的数据(val)画到msg(canvas)上,加上时间戳动态生成二维码
      QRCode.toCanvas(this.$refs.canvas, this.url, opts, function (error) {
        if(error){
          console.log('加载失败!');
        }
      });
    },
    saveCode(){
      //下载二维码
      let base64Img =  this.$refs.canvas.toDataURL('image/jpg');
      //创建下载标签,然后设置链接和图片名称
      let a = document.createElement('a')
      a.href = base64Img
      a.download = '二维码'+Date.now()
      a.click()
      //销毁元素
      a.remove()
    }
  },
  mounted() {
    this.getQRCode()

    //设置logo图标
    if(this.logoUrl!= ''){
      let myCanvas = this.$refs.canvas
      let ctx = myCanvas.getContext('2d')
      // 在Canvas画布 添加图片
      let img = new Image()
      img.crossOrigin = 'Anonymous';//解决Canvas.toDataURL 图片跨域问题
      img.src = this.logoUrl;
      img.onload = ()=>{
        //第一个设置的元素,第二三是位置,后面两个是宽和高
        //居中的位置计算为 (二维码宽度-img宽度)/2
        let codeWidth = (this.canvasWidth *0.75)/2
        let codeHeight = (this.canvasHeight * 0.75)/2
        ctx.drawImage(img, codeWidth, codeHeight,this.canvasWidth*0.25,this.canvasHeight*0.25)
      }
    }
  },
}
</script>

errorCorrectionLevel纠错级别有四个:

  1. L(7%)
  2. M(15%)
  3. Q(25%)
  4. H(30%)

级别越高,logo占的大小就越大。

通过鼠标点击二维码,就可以将二维码保存在本地

文档地址:qrcode - npm(无中文)文章来源地址https://www.toymoban.com/news/detail-788734.html

到了这里,关于Vue中两种生成二维码(带logo)并下载方式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 生成小程序的二维码的base64码(中间logo可以自定义)

    加入以下代码: 完整代码:  

    2024年02月05日
    浏览(71)
  • 微信小程序生成二维码(weapp-qrcode)可添加logo

    插件 npm 地址:https://www.npmjs.com/package/weapp-qrcode 插件 GitHub 地址:https://github.com/yingye/weapp-qrcode/tree/master 一、引入 1、根据 GitHub 指引将 weapp-qrcode 放到本地 uitl 文件夹下; 2、创建 canvas 3、在 js 文件中引入 weapp-qrcode 以及使用; 这里是添加了 logo 的二维码;相关参数请参考

    2024年02月15日
    浏览(38)
  • 在Spring Boot中使用ZXing开源库生成带有Logo的二维码

    在上一篇文章的基础上,我们将进一步扩展功能,实现在生成的二维码中嵌入Logo图片。这样的二维码更具个性化和识别度。让我们逐步完成这个功能。 首先,准备一张用作Logo的图片,并确保它的大小适中。将Logo图片放置在项目的资源文件夹中,例如 src/main/resources 。 在 Q

    2024年01月24日
    浏览(52)
  • 【vue-qrcode + html2canvas】前端二维码生成与下载

    其实一开始搜的时候,很多还都是推荐的 vue-qrcode ,于是就先用这个,但是发现想要在二维码中间放一个自定义的image的时候,这个库有点麻烦,需要自己将 image 图片盖在二维码上面(官方教程也是如此)。好吧,一开始我也这么干了,但是盖完之后,我需要下载这个有居中

    2024年04月17日
    浏览(48)
  • Java生成二维码的两种方法

    本文介绍Java生成二维码的两种方法,这两种方法都依赖于google提供的二维码依赖包。 一种是自己写工具类,代码可以网上抄。 另一种是使用hutool第三方工具类的依赖包,不用自己抄代码。 自定义工具包就是借助google生成二维码的依赖包,然后自己写工具类。 工具类 测试代

    2024年02月06日
    浏览(52)
  • Vue中使用qrcode实现渲染二维码中间添加自定义logo-demo

    我们首先创建一个新的 canvas 元素,用于容纳生成的二维码。然后,使用 QRCode.toCanvas 方法将二维码生成到新的 canvas 元素中。 接下来,在 logo.onload 事件处理程序中,我们创建一个 Image 对象来加载logo图像,并在二维码中间绘制logo。最后,将生成的二维码转换为数据URL,并将

    2024年02月10日
    浏览(45)
  • 前端生成批量二维码,并且下载到本地

    前端生成批量二维码,并且下载,本项目使用了 vue3. index.scss index.vue 经测试如果100以上生成不建议是用这种方式,会 超级慢,还是建议后端去做这个事情

    2024年02月15日
    浏览(68)
  • vue生成二维码

    本次将教大家如何只通过vue前端快速的生成二维码 安装依赖 通过命令 安装二维码生成的依赖包到我们的项目中 引入 在自己需要构建生成的页面进行引入 构建通用方法 ps: 其中里面的参数 classId 为html的class标签名称 value 为需要将哪些数据进行构建生成二维码 通过该方法,我

    2024年02月12日
    浏览(41)
  • 前端vue项目:生成二维码,扫二维码跳转到相应页面

    Vue2项目 1、安装依赖::npm i arale-qrcode --save 2、引入:import AraleQRCode from \\\"arale-qrcode\\\"; 接下来让我们纯前端生成一个二维码                               【PS:亲测有效,大家可以放心使用 CV 大法哈  !】 HTML JS 需求中遇到的情况,也是百度了很久参考了很多大佬的文章

    2024年02月07日
    浏览(58)
  • vue,uniapp生成二维码

    话不多说直接开干 先是vue的 1,首先按照一下依赖 2,在需要使用的页面引入 3,使用 然后是uniapp // 1,新建一个js文件夹,把以下代码放进来,代码我放在最后了,js文件名为uqrcode.js 2,在使用的页面引用 3,在使用前需要有一个画布 4,使用 下面附上js代码

    2024年02月11日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包