搜索
简帛阁>技术文章>Vue 实现生成二维码(qrcodejs2),并生成图片(html2canvas)可实现保存和识别

Vue 实现生成二维码(qrcodejs2),并生成图片(html2canvas)可实现保存和识别

1 引包

npm install qrcodejs2 --save
npm install --save html2canvas
import html2canvas from 'html2canvas'
import QRCode from 'qrcodejs2'

1 生成二维码
tip:需要写一个定宽,不然生成图片会发生偏移和二维码不完整

 <div></div>

js
生成二维码

  bindQRCode () {
      let t = this
      // console.log(t.userInfo.account)
      new QRCode(this.$refs.qrCodeDiv, {
        // text: 'http://192.168.0.xx:8765/#/SignAgency?code=' + t.userInfo.account,
        width: 200,
        height: 200,
        colorDark: '#333333', // 二维码颜色
        colorLight: '#ffffff', // 二维码背景色
        correctLevel: QRCode.CorrectLevel.L// 容错率,L/M/H
      })
      this.createPicture() // 二维码生成后,执行生成图片
    },

将二维码生成图片

 createPicture () {
      html2canvas(this.$refs.qrCodeDiv, {
        backgroundColor: null,
        width: 200,
        height: 200
      }).then(canvas => {
        var imgData = canvas.toDataURL('image/jpeg')
        this.imgData = imgData
      })
    },

Tips:【小程序云开发】中高级前端面试题库(源码:小程序中联系我哟)。
---------- 创作不易,感谢大家,请多多支持!

1引包npminstallqrcodejs2savenpminstallsavehtml2canvasimporthtml2canvasfromhtml2canvasimportQRCodefromq
1、安装cnpmiqrcodejs2S2、项目中使用HTML:<!放置二维码的容器,需要给一个ref><dividqrcoderefqrcode></div>js:
近写项目遇到一个需求,根据后台给的地址生成二维码,在网上找了下,qrcodejs2使用还是比较多,试了下也能实现需求,就整理下使用方法,方便以后使用1安装包cnpmiqrcodejs2S2项目中使用
1首先安装qrcodejs2cnpmiqrcodejs2S2在组件内部直接引用importQRCodefromqrcodejs2;3html代码4script代码(请不要被图中事件顺序误导,展示二维
1在项目使用node安装qrcodejs22在需要使用二维码打印的页面中引入3页面代码<template><div><elbutton@clickprintCode>
使用方法项目中引入npminstallhtml2canvashtml代码//html代码<!把需要生成截图的元素放在一个元素容器里,设置一个ref><divclassimage_t
之前我们简单的了解了canvas的基本用法,这里我们来了解下如何将html内容写入到canvas生成图片,这里我使用到了html2canvas插件,这个插件是基于canvas实现html2canv
结合html2canvasjsPDF实现html页面转pdfBy:授客QQ:103355122实践环境win10Vue296axios0180html2canvas100rc3jspdf153安装
第一步,把网页保存Canvas画布,借助于html2canvas库,http://html2canvashertzencom/html2canvas(documentgetElementById("
一前言最近做了一个周报,从不同的数据表抓取数据,然后展示到前端页面显示。这个过程不难,让我烦恼的是:要把周报的数据导出来,然后打印,打印也必须在一张纸上。想到这里,我整理了一下思绪,我要写几个存储过程