精华内容
下载资源
问答
  • 如何用图片生成二维码
    2021-06-08 11:46:50

    1、 图片

    <el-table-column label="头像" align="center">
                <template slot-scope="{row}">
                  <img
                    slot="reference"
                    v-imagerror="require('@/assets/common/bigUserHeader.png')"
                    :src="row.staffPhoto "
                    style="border-radius: 50%; width: 80px; height: 80px; padding: 5px"
                    @click="showQrCode(row.staffPhoto)"
                  >
                </template>
    </el-table-column>

    2、v-imageerror指令

    这是在另外一个js文件里面,定义自定义指令并注册为全局指令

    import Vue from 'vue'
    Vue.directive('imagerror', {
      inserted(dom, options) {
        // options是 指令中的变量的解释  其中有一个属性叫做 value
        // dom 表示当前指令作用的dom对象
        // dom认为此时就是图片
        // 当图片有地址 但是地址没有加载成功的时候 会报错 会触发图片的一个事件 => onerror
        // console.log(options)
        dom.src = dom.src || options.value
        dom.onerror = function() {
          // 当图片出现异常的时候 会将指令配置的默认图片设置为该图片的内容
          // dom可以注册error事件
          dom.src = options.value
        }
      },
      componentUpdated(dom, options) {
        dom.src = dom.src || options.value
      }
    
    })

    图片地址生成二维码

    1、首先,需要安装生成二维码的插件

    $ npm i qrcode

    $ yarn add qrcode

    qrcode的用法是

    QrCode.toCanvas(dom, info)

    dom为一个canvas的dom对象, info为转化二维码的信息
    

    2、将canvas标签放到dialog的弹层中

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

    3、点击员工的图片时,显示弹层,并将图片地址转化成二维码

    showQrCode(url) {
          // url存在的情况下 才弹出层
          if (url) {
            this.showCodeDialog = true // 数据更新了 但是我的弹层会立刻出现吗 ?页面的渲染是异步的!!!!
            // 有一个方法可以在上一次数据更新完毕,页面渲染完毕之后
            this.$nextTick(() => {
              // 此时可以确认已经有ref对象了
              QrCode.toCanvas(this.$refs.myCanvas, url) // 将地址转化成二维码
              // 如果转化的二维码后面信息 是一个地址的话 就会跳转到该地址 如果不是地址就会显示内容
            })
          } else {
            this.$message.warning('该用户还未上传头像')
          }
        }

     

     

    更多相关内容
  • Java生成二维码图片

    2018-02-01 15:40:42
    Java代码直接生成专属二维码图片。二维码图片解析。Web前端二维码以图片显示。生成二维码可以维修,QQ,支付宝等扫一扫可以直接访问。
  • 从国外网站找到的,通过调用.net动态库来将字符串生成二维码字符流,而不是传统的图片图片颜色会被操作系统,打印机驱动,或软件给修改,所以纯文本是纯黑的二维码,这种方式例子不多,找来当福利,Demo是C#语言写...
  • pb11.5 pbni + qrencode4.0.2 + opencv4.0,支持pb11.5、12.5请自已升级, 可自定义生成二维码图片的大小, 可以在二维码中间添加logo图片,以圆形显示, 使vs2015c++编译,需要vc14运行库支持。
  • 二维码是我们在开发网站和项目的时候经常遇到的,我第一次接触二维码时,翻过许多资料,也请教...二维码真实情况,为了让大家少走弯路,避免各种坑,节约大家成本和时间,特制作此课程,让你彻底明白二维码生成过程。
  • ZXing是谷歌的一个开源库,可以用来生成二维码、扫描二维码。本文所介绍的是第一部分。 首先上效果图: ZXing相关各种文件官方下载地址:https://github.com/zxing/zxing/releases 或者在这里下载(只有本项目所用...
  • java生成二维码,且中间带图片(logo)的方法,且logo的具体位置可以自己设置,下载下来就能运行的 java生成二维码,且中间带图片(logo)的方法,且logo的具体位置可以自己设置,下载下来就能运行的
  • pb,二维码条形码生成,数据窗口中可用,2020最新,亲测可用,ddddddddddddddddddddddddd
  • 生成二维码数据的主要代码来自,因为它这个里面生成二维码图片的功能在微信小程序里不能使用,我将这个功能改写成可以在微信小程序中使用。 截图 背景图测试中...(页面pages/test/test) 使用(自适应版本,使用rpx...
  • 通过导入要生成二维码的文本数据到Memo上,批量的在“D:\TestDATA\QRCode”(如果没有此文件夹可以新建一个,或者修改代码)中批量生成二维码图片
  • 主要介绍了vue中实现动态生成二维码的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • jquery生成二维码

    2017-11-30 14:40:02
    jquery生成二维码、jquery生成带LOGO的二维码,jquery生成二维码并将二维码保存到照片中
  • C#生成图片二维码代码源码也可生成不带图片二维码以及条形码生成图片二维码代码源码也可生成不带图片二维码以及条形码生成图片二维码代码源码
  • jQuery网址提交生成二维码图片,表单提交,动态生成网址域名二维码
  • Delphi生成二维码的示例,Delphi版本:Delphi 7
  • 代码放到线上使用,本地生成海报图片显示不了,必须...qrcodejs2+html2canvas 生成二维码和海报qrcodejs2+html2canvas 生成二维码和海报qrcodejs2+html2canvas 生成二维码和海报qrcodejs2+html2canvas 生成二维码和海报
  • 主要将文本生成二维码图片 测试一:将文本生成白底黑字的二维码图片 测试二:将文本生成带logo的二维码图片 ''' __author__ = 'Xue' import qrcode from PIL import Image import os #生成二维码图片 def make_qr...
  • 在QRGenerator源码基础上修改 https://download.csdn.net/download/weixin_54626591/85345281
  • 1)VS2019 C#开发生成二维码源码 2)根据内容生成条码图片 3)可以显示图片底部显示文字信息 全开源放心下载
  • 直接VB6代码生成二维码,我也把代码做成了控件的方式,方便添加到工程随意使用。 看到CSDN有个同类功能上传,竟然要44积分,太黑了,CSDN管理员,看我的要多少积分? VB生成二维码图形的控件,非常好用,含使用范例...
  • 从 csv 文件到图像的二维码生成
  • 2.生成二维码时允许指定图片的名称来源,也就是某一列的值命名图片。 3.插入二维码时提供“插入到批注”和“插入到单元格”两个选项 4.可以自行决定插入二维码后是否保存二维码图片。 5.二维码支持UTF8、GB18030和...
  • 生成二维码和二维码图片识别工具(nextqrcode 代码copy过来,移除了扫描的功能)
  • .net 生成二维码,直接生成图片格式,Qrcode.cs文件中,有直接调用的方法,根据实际需要,修改路径等相关参数
  • 1.使用weapp.qrcode生成二维码,并使用uni.canvasToTempFilePath生成临时图片文件, 2.使用canvas绘制二维码, 3.使用uni.canvasToTempFilePath生成图片文件,然后uni.saveImageToPhotosAlbum保存到本地
  • python生成图像二维码

    2020-04-08 08:31:34
    图片二维码生成器 1.放入网址到指定代码区域(代码注释有标记) 2.放入图片到pycharm或python路径 3.放入图片名称到指定代码区域(代码注释有标记) 4.把最后的图片后缀名改为.png的格式,否则无法生成
  • canvas生成二维码

    2020-03-05 15:29:31
    使用canvas+qrcode生成二维码,可拼接参数,输入需要的连接就可以生成对应的二维码。(下载可直接运行,附有所需要的脚本)
  • 将一个字符串生成二维码图片,如果想要带log的二维码,可以在生成后的二维码中间部位自己添加一个小log,具体实现如下,感兴趣的朋友可以参考下
  • labview生成二维码

    2018-07-04 14:18:37
    本labview代码的功能是生成二维码,大家可以试试看,支持多种编码方式

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 48,048
精华内容 19,219
关键字:

如何用图片生成二维码