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 ̄)づ
❤如果喜欢比卡丘分享的文章,就给比卡丘点个关注吧!(๑′ᴗ‵๑)づ╭❤~
❤鉴于个人经验有限,所有观点及技术研点,如有异议,请直接回复讨论(请勿发表攻击言论)

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

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

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

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Method类的Invoke方法[通俗易懂]

    Method类的Invoke方法[通俗易懂]Dto:dto里面放的都是同一类型的字段/**Creation:2Dec2015*/packagecom.java.invoke;publicclassDto{privateIntegerCol1;privateIntegerCol2;privateIntegerCol3;privateIntegerCo

    2022年6月1日
    36
  • git命令删除分支_git删除一个分支

    git命令删除分支_git删除一个分支git命令删除分支应用场景:有时我们已经在gitlab或者gitee上面已经删除分支,但是本地编辑器gitbranch的时候依然有该分支,我们想删除;亦或者想在本地直接删除远程的分支假设,你想删除本地testone分支gitbranch查看本地分支,比如:testonetesttwo两个分支gitcheckouttesttwo切换到testtwo分支,因为你想删除testone执行gitbranch-dtestone即可另外:

    2022年8月31日
    3
  • 推荐几个长期有效的免费服务器和免费vps游戏服务器亲测再用

    推荐几个长期有效的免费服务器和免费vps游戏服务器亲测再用对于新手,搞网络购买现有的服务器和VPS成本太高!这里我长期测试筛选了几个长期有效好用的服务器!(当然免费虽好请勿滥用)1.FREEWHA这个服务器已经存在10几年了,好用谷歌收录也可以。提供1.5g空间免费流量,SSL申请免费空间很少有提供SSL的!这个空间的缺点就是无法上传大文件,最好用FTP上传。如果你做博客网站,选择SQLIVE数据库的最好。比如;ZBLOG的网站程序.2.Freehosting一个非常稳定的免费空间,提供10G空间和无限流量。这个空间其他功能都需要购买,数据库链接有流量限制

    2022年10月5日
    3
  • 查看服务器硬件配置信息命令_服务器硬件参数

    查看服务器硬件配置信息命令_服务器硬件参数本次由于需要搭建一套环境,但是所需硬件配置不足,需要进行统计采购。那么就需要得知服务器现有配置,所以这次会介绍些常用的命令和工具来查询硬件信息。其实也可以通过像DELL厂商的IDRAC控制台来获取这些

    2022年8月2日
    12
  • 终极解决:AAPT2 error: check logs for details

    终极解决:AAPT2 error: check logs for details

    2021年9月30日
    50
  • C++二维vector初始化大小方法

    C++二维vector初始化大小方法vector vector int gt newOne r vector int c 0 int vector int

    2025年12月6日
    5

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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