vue生成二维码并保存图片_php二维码生成代码

vue生成二维码并保存图片_php二维码生成代码图片地址生成二维码

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

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺


前言

vue中点击图片生成二维码,利用的是qrcode插件,在需要使用的页面中引入qrcode并使用承载的DOM元素即可

$ npm i qrcode
QrCode.toCanvas(dom, info)

一、图片地址生成二维码

示例:我们想完成这样一个功能,当我们拥有头像地址时,将头像地址生成一个二维码,用手机扫码来访问。

vue生成二维码并保存图片_php二维码生成代码

二、使用步骤

1.安装插件

$ npm i qrcode

2.设置承载二维码的DOM元素


<!-- 二维码弹框 -->
      <el-dialog title="二维码" :visible.sync="showCodeDialog" @close="imgUrl=''">
        <el-row type="flex" justify="center">
          <canvas ref="myCanvas" />
        </el-row>
      </el-dialog>

data(){
    return {
      showCodeDialog: false, // 二维码查看弹框显示控制变量
      imgUrl: '' // 预览头像地址}
}

2.执行方法(点击图片之后,弹框显示并且显示二维码)

利用QrCode.toCanvas(dom, info),其中dom为一个canvas的dom对象,info为转化二维码的信息

        
//template标签里的内容,点击图片调用方法
        <el-table-column label="头像" prop="staffPhoto">
          <template slot-scope="scope">
            <image-holder :src="scope.row.staffPhoto" 
                          @click.native="showQrCode(scope.row.staffPhoto)" />
          </template>
        </el-table-column>
//别忘了引入插件
import QrCode from 'qrcode'
//script标签里methods的内容书写方法
     showQrCode(url) {
      // url存在的情况下 才弹出层
      if (url) {
        this.showCodeDialog = true // 数据更新了 但是我的弹层会立刻出现吗 ?页面的渲染是异步 的!!!!
        // 有一个方法可以在上一次数据更新完毕,页面渲染完毕之后
        this.$nextTick(() => {
          // 此时可以确认已经有ref对象了
          QrCode.toCanvas(this.$refs.myCanvas, url) // 将地址转化成二维码
          // 如果转化的二维码后面信息 是一个地址的话 就会跳转到该地址 如果不是地址就会显示内容
        })
      } else {
        this.$message.warning('该用户还未上传头像')
      }
    }


总结

过程简介:下载相关插件,在页面中引入,创建元素来承载二维码,用QrCode.toCanvas(dom, info)来实现二维码的呈现。

注意点:以上用到了ref属性来标识元素,这很常见也很重要,用于获取DOM元素

这个功能没什么技术点,就只是了解qrcode插件的使用方法,以后在项目中可以写写,提高用户的体验

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

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

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

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

(0)
blank

相关推荐

  • django示例_django网站模板下载

    django示例_django网站模板下载前言目前市面上有非常多的模板系统,其中最知名最好用的就是DTL和Jinja2。DTL是DjangoTemplateLanguage三个单词的缩写,也就是Django自带的模板语言。当然也可以配置

  • 库存系统难破题?且看京东到家如何破「建议收藏」

    库存系统难破题?且看京东到家如何破「建议收藏」京东到家库存系统架构设计目前,京东到家库存系统经历两年多的线上考验与技术迭代,现服务着万级商家十万级店铺的规模,需求的变更与技术演进,我们是如何做到系统的稳定性与高可用呢,下图会给你揭晓答案(通过强大的基础服务平台让应用、JVM、Docker、物理机所有健康指标一目了然,7*24小时智能监控告警让开发无须一直盯着监控,另外数据与业务相辅相成,用数据验证业务需求,迭代业务需求,让业务需求都尽可能

  • html+css实现登录界面

    html+css实现登录界面

    2021年12月16日
  • windows服务创建工具srvany.exe介绍

    windows服务创建工具srvany.exe介绍srvany.exe介绍 srvany.exe是MicrosoftWindowsResourceKits工具集的一个实用的小工具,用于将任何EXE程序作为Windows服务运行。也就是说srvany只是其注册程序的服务外壳,这个特性对于我们来说非常实用,我们可以通过它让我们的程序以SYSTEM账户启动,或者实现随机器启动而自启动,也可以隐藏不必要的窗口,比如说控制台窗口等等。 

  • tomcat服务器宕机解决方案

    tomcat服务器宕机解决方案tomcat服务器宕机解决方案

  • 漫画:18年来,我第一次尝试穿裙子

    今天要推荐的是校园故事 《恋色多选题》 曾经的假小子女主进入大学之后, 微妙地当选了班花。 还迎来了自己人生的桃花期, 这个时候却遇到了他…… 原文始发于微信公众号(全栈程序员社区…

发表回复

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

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