vue生成二维码并保存图片_vue实现扫描二维码

vue生成二维码并保存图片_vue实现扫描二维码一、生成简单的二维码(不带图片)1.引入插件npminstallqrcode–save2.页面中使用<divid=”qrcode”class=”erweima”></div>页面中引入importQRCodefrom”qrcodejs2″;methods:{qrcode(){this.$nextTick(()=>{letqrcode=newQRCode(“qrcode”,{

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

一、生成简单的二维码(不带图片)
1.引入插件

npm install qrcode --save

2.页面中使用

<div id="qrcode"  class="erweima"></div>

页面中引入

import QRCode from "qrcodejs2";
methods: { 
   
      qrcode() { 
   
      this.$nextTick(() => { 
   
        let qrcode = new QRCode("qrcode", { 
   
          width: 320,
          height: 320, // 高度
          text: 'http://www.baidu.com', // 二维码内容
          render: "canvas",   //设置渲染方式(有两种方式 table和canvas,默认是canvas)
          background: "#f0f",
          foreground: "#ff0",
          src: this.img1, //二维码中间的图片
          correctLevel: 0   // 容错率
        });
      });
    },

mounted () { 
   
    this.qrcode()
}

二、中间带有图片的二维码
1.引入插件

npm install vue-qr --save

2.页面使用

<vue-qr  
class="erweima"  
:logoSrc="imageSrc"    //中间图片地址
text="http://www.baidu.com"  //二维码跳转地址
:size="400"     //二维码大小
></vue-qr>
  <script>
import VueQr from 'vue-qr';
export default { 
   
    data () { 
   
      return { 
   
        imageSrc:'../src/assets/logo.png',
        }
    },
   components: { 
   
    VueQr
  },
  }
 </script>

在这里插入图片描述

❤如果文章对您有所帮助,就在文章的右上角或者文章的末尾点个赞吧!(づ ̄ 3 ̄)づ
❤如果喜欢比卡丘分享的文章,就给比卡丘点个关注吧!(๑′ᴗ‵๑)づ╭❤~
❤鉴于个人经验有限,所有观点及技术研点,如有异议,请直接回复讨论(请勿发表攻击言论)

拿走,不用谢!!!送人玫瑰,手留余香
在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/186420.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(1)


相关推荐

  • mysql慢查询分析工具_mysql慢查询日志分析工具「建议收藏」

    mysql慢查询分析工具_mysql慢查询日志分析工具「建议收藏」启用slowlog有两种启用方式:1,在my.cnf里通过log-slow-queries[=file_name]2,在mysqld进程启动时,指定–log-slow-queries[=file_name]选项比较的五款常用工具mysqldumpslow,mysqlsla,myprofi,mysql-explain-slow-log,mysqllogfiltermysqld…

    2022年10月14日
  • java 创建txt_java创建txt文件并存入内容

    java 创建txt_java创建txt文件并存入内容本文实例为大家分享了java创建txt文件并存入内容的具体代码,供大家参考,具体内容如下importjava.io.BufferedReader;importjava.io.File;importjava.io.FileInputStream;importjava.io.FileOutputStream;importjava.io.IOException;importjava.io.I…

  • 用fread函数或fwrite函数读写的文件必须是_FCGI_fwrite

    用fread函数或fwrite函数读写的文件必须是_FCGI_fwritefwrite和fread是以记录为单位的I/O函数,fread和fwrite函数一般用于二进制文件的输入输出。#includesize_tfread(void*ptr,size_tsize,size_tnmemb,FILE*stream);size_tfwrite(constvoid*ptr,size_tsize,size_tnmemb,FILE*s

  • vue子组件调用父组件方法_父组件获取子组件数据

    vue子组件调用父组件方法_父组件获取子组件数据Vue子组件调用父组件的方法-靳哲-博客园Vue中子组件调用父组件的方法https://www.cnblogs.com/jin-zhe/p/9523782.html

  • stm32中u8,u16,u32的理解_常用stm32是什么型号

    stm32中u8,u16,u32的理解_常用stm32是什么型号http://www.51hei.com/bbs/dpj-27167-1.html在KeilMDK开发环境里,比如一个无符号32位整形数据会有很多种表示方法:1.unsignedint32(C语言标准表达方法)    2.uint32_t;      3.u32;  这三种方式都是在表达同一个意思。可为什么ST的开发人员要搞的这么乱呢? 其实ST搞这

  • python语言中变量的命名规则是什么_Python中变量的命名规则

    python语言中变量的命名规则是什么_Python中变量的命名规则讲解对象:Python中变量的命名规则作者:融水公子rsgz➢>变量的命名理解Python需要使用标识符给变量命名,其实标识符就是用于给程序中变量、类、方法命名的符号(简单来说,标识符就是合法的名字)。➢>命名要求Pvthon语言的标识符必须以字母、下画线()开头,后面可以跟任意数目的字母、数字和下画线➢>注意此处的字母并不局限于26个英文字母可以包含中文字符、日文字符等…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号