vue生成二维码与识别，vue扫一扫功能实现_手机扫一扫代码如何写

一 、安装qrcode

npm install qrcode
1

二、生成二维码

<!--    html部分  -->
<template>
        <div class="all">
          <div class="qr_center">
            <canvas id="canvass"></canvas>
          </div>
        </div>
</template>

<script>
   useqrcode(createId) {
      // createId是生成的二维码内容，可以添加变量或字符串随自己心意
      // this.$nextTick()  异步执行dom更新,一旦观察到数据变化就会开启一个队列，
      // 我是这个地方，是运用在一个vue项目里编写的 html部分写在了一个弹窗里面，所以使用
      //了this.$nextTick来获取 document.getElementById('canvass')
      this.coding = true;
      this.$nextTick(() =>{
        let canvas = document.getElementById('canvass')
        QRCode.toCanvas(canvas, createId, error=>{
          if (error) console.error(error)
        })
      })
    },
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

三、html部分，上传二维码解析（数据库或图片服务器未做存储的情况下，将你生成的 二维码保存本地上传），另外提醒一下使用$函数要下载或引用Jquery

<template>
	<div>
		<div>
			<input style="text-align: center" type='text' id='file' disabled="disabled" class="form-control" />&nbsp;
				<span class="input-group-btn"><button id="btn" type='button' class='btn btn-primary language_label'
				@click="analysis" onclick="document.getElementById('pictureChange').click()">选择文件</button>
				</span>
				<input  type="file" id="pictureChange" class="file2" style="display: none" onchange="document.getElementById('file').value=this.value.substring(this.value.lastIndexOf('\\')+1)" />
		</div>

		<div>
			<h4>识别结果：</h4>
			<ul id="result"></ul>
			<div id="bos"></div>
		</div>
	</div>
</template>
<script>
    analysis(){
      let cd = [];
      this.$nextTick(() =>{
        $("#bos").append('<canvas id="qrcanvas" style="display:none;"></canvas>')
        $("#pictureChange").change(function (e) {
          let file = e.target.files[0];
          if(window.FileReader) {
            let fr = new FileReader();
            fr.readAsDataURL(file);
            fr.onloadend = function(e) {
              let base64Data = e.target.result;
              base64ToqR(base64Data)
            }
          }
        })

        function base64ToqR(data) {
          var c = document.getElementById("qrcanvas");
          var ctx = c.getContext("2d");

          var img = new Image();
          img.src = data;
          img.onload = function() {
            $("#qrcanvas").attr("width",img.width)
            $("#qrcanvas").attr("height",img.height)
            ctx.drawImage(img, 0, 0, img.width, img.height);
            var imageData = ctx.getImageData(0, 0, img.width, img.height);
            const code = jsQR(imageData.data, imageData.width, imageData.height, {
              inversionAttempts: "dontInvert",
            });
            if(code){
              Encode.push(code.data)
              showCode(code.data)
              return
            }else{
              alert("识别错误")
            }
          };
        }

        function showCode(code){
          $("#result").append("<li>"+code+"</li>")
        }
      })
    },
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

以下是移动端的扫一扫解析方法

一，安装jsQR

 npm install jsqr --save
1

二、扫一扫使用

<template>
  <div  class="scan">
    <div class="video-container">
      <video class="video" id="video-1"></video>
    </div>
    <div class="camera-container" v-if="videoInputDevices.length">
      <label>摄像头：</label>
      <select v-model="currentVideoInputDevice">
        <option
          v-for="(videoInputDevice, index) in videoInputDevices"
          :key="index"
          :value="videoInputDevice"
        >
          {{ videoInputDevice.label }}
        </option>
      </select>
    </div>
  </div>
</template>



<script >
import {
  BrowserMultiFormatReader,
  ChecksumException,
  FormatException,
} from "@zxing/library";
export default {
  data() {
    return {
      codeReader: new BrowserMultiFormatReader(),
      videoInputDevices: [],
      currentVideoInputDevice: {},
      decodeResult: undefined,
    };
  },
  created() {},
    methods: {
    async openScan() {
      const _this = this;
      _this.codeReader
        .getVideoInputDevices() //老版本listVideoInputDevices()
        .then((videoInputDevices) => {
          if (videoInputDevices && videoInputDevices.length) {
            if (videoInputDevices.length > 1) {
              videoInputDevices.reverse();
            } //防止先唤出前摄像头
            _this.videoInputDevices = videoInputDevices;
            _this.currentVideoInputDevice = videoInputDevices[0];
          }
        })
        .catch(() => {});
    },

    decodeFromInputVideo() {
      const _this = this;
      _this.codeReader.reset();
      // 多次
      _this.codeReader.decodeFromVideoDevice(
        _this.currentVideoInputDevice.deviceId,
        "video-1",
        (result, err) => {
          if (result) {
            _this.decodeResult = result;
          }
          if (err) {
            if (err instanceof ChecksumException) {
              console.log(
                "A code was found, but it's read value was not valid."
              );
            }
            if (err instanceof FormatException) {
              console.log("A code was found, but it was in a invalid format.");
            }
          }
        }
      );
    },

    successDecode() {
      const _this = this;
     
      alert(_this.decodeResult.text)
      alert("Hi! Welcome to my world!")
    },
  },
  watch: {
    currentVideoInputDevice: function () {
      this.decodeFromInputVideo();
    },
    decodeResult: function () {
      this.successDecode();
    },
  },
  mounted: function () {
    this.openScan();
  },
  unmounted: function () {
    this.codeReader.reset(); //关闭
  },
};
</script>

<style scoped lang="scss">
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.scan {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #ff9900;
  width: 100vw;
  height: 100vh;
  background: #000;
  .video-container {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    video {
      width: 96vw;
      max-height: 80vh;
    }
    @media (min-width: 500px) {
      video {
        // width: 80vh;
        max-width: 96vw;
        height: 80vh;
      }
    }
  }
  .camera-container {
    margin-top: 5vh;
    width: 80%;
    height: 50px;
    line-height: 44px;
    border-radius: 10px;
    border: 3px solid #ff9900;
    display: flex;
    justify-content: center;
    select {
      width: calc(100% - 80px);
      color: #ff9900;
      background: transparent;
      border: none;
      outline: none;
    }
  }
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153

这是直接字符串生成二维码的代码或许能给你一些灵感，copy 直接运行即可

<template>
  <div class="all">
    <div class="ip-app">
      <!--页头-->
      <el-breadcrumb separator-class="el-icon-arrow-right" class="ip-head">
        <el-breadcrumb-item>资产管理</el-breadcrumb-item>
        <el-breadcrumb-item>二维码生成</el-breadcrumb-item>
      </el-breadcrumb>
    <div class="QR_switchover">
      <span>二维码生成</span>
    </div>
    <div class="QRCode_seek">
      <div>请输入内容：</div>
      <div><el-input v-model="txt"></el-input></div>
      <div><el-button @click="create()" type="primary">生成</el-button></div>
    </div>
    <div class="qr_center">
      <canvas id="canvass"></canvas>
    </div>
    </div>
  </div>
</template>

<script>
  import QRCode from 'qrcode'
  export default {

    // components: {ElButton},
    data() {
      return {
        msg: '江南无所有、聊赠一枝春',
        txt:""
      }
    },
    mounted(){
      this.useqrcode(this.msg)
    },
    methods: {
      useqrcode(txt) {
        //生成的二维码内容，可以添加变量
        var canvas = document.getElementById('canvass')
        QRCode.toCanvas(canvas, txt, error=>{
          if (error) console.error(error)
        })
      }
      ,
      create(){
        if(!this.txt&&this.txt!="0"){
          this.$message('请输入生成值');
        }else{
          this.useqrcode(this.txt)
          this.$message({
            message: '恭喜你，生成成功',
            type: 'success'
          });
        }
      }
    }
  }

</script>

<style>
  #canvass{
    height: 500px!important;
    width: 500px!important;
  }
  *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  body,html{
    height: 100%;
  }
  .all{
    height:100%;
    width:100%;
    padding:1% 2%;
  }
  .QR_switchover{
    height: 80px;
    background-color: #ffffff;
    /*box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);*/
    line-height: 80px;
    padding-left:2%;
    font-size:1.8em;
  }
  .qr_center{
    background-color: #fff;
    margin-top: 2%;
    text-align: center;
  }
  .QRCode_seek{
    padding: 2% 3%;
    background-color: #fff;
  }
  .QRCode_seek>div{
    display: inline-block;
  }
  .QRCode_seek>div:last-child{
    margin-left: 2%;
  }

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105