zoukankan      html  css  js  c++  java
  • vue项目中实现上传图片识别二维码jsQR

    效果图:

     jsQR 是一个纯 JavaScript 二维码解析库。该库读取原始图像或者是摄像头,并将定位,提取和解析其中的任何QR码。(来源:https://www.oschina.net/p/jsqr?hmsr=aladdin1e1

    1、 安装jsQR :  npm install jsqr --save 

    2、 jsQR方法使用实例:https://www.cnblogs.com/wenqd/p/11541030.html

    var imageData = ctx.getImageData(0, 0, img.width, img.height);
    const code = jsQR(imageData.data, imageData.width, imageData.height, {
        inversionAttempts: "dontInvert",
    });
    if(code){
        showCode(code.data)
    }else{
        alert("识别错误")
    }

     全部代码如下:

    <template>
        <div id="app">
            <span>{{result}}</span>
            <br>
            <input type="file" accept="image/png, image/jpeg" @change="changeFile"> </input>
            <br>
            <img id="myimg" v-show="false">
            <canvas id="mycanvas"></canvas>
        </div>
    </template>
    
    <script>
        import jsQR from "jsqr"
        export default {
            data() {
                return {
                    result: "",
                }
            },
            methods: {
                changeFile(e) {
                    var that = this;
                    that.result = "请上传二维码";
                    console.dir(e.target.files[0].name);
                    var fileReader = new FileReader();
    
                    fileReader.onload = function(event) {
                        var data = event.target.result;
                        // console.dir(data);
                        var img = document.getElementById("myimg");
                        img.src = data;
    
                        img.onload = function() {
                            var mycanvas = document.getElementById("mycanvas");
                            var ctx = mycanvas.getContext("2d");
                            // canvas 的width/height重新设置的时候会清空画布
                            mycanvas.width = img.width;
                            mycanvas.height = img.height;
    
                            ctx.drawImage(img, 0, 0);
                            var imageData = ctx.getImageData(0, 0, img.width, img.height);
                            console.log(imageData);
                            
                            const code = jsQR(imageData.data, imageData.width, imageData.height, {
                                inversionAttempts: "dontInvert",
                            });
                            if (code) {
                                console.log(code.data);
                            } else {
                                console.log("识别错误");
                            }
                            that.result = code.data;
                        }
                    }
                    fileReader.readAsDataURL(e.target.files[0]);
                }
            }
        }
    </script>
    <style>
    
    </style>
  • 相关阅读:
    【杭电】[1874]畅通工程续
    【杭电】[2544]最短路
    【杭电】[1087]Super Jumping! Jumping! Jumping!
    【HPU】[1689]MZY寻宝
    【杭电】[1495]非常可乐
    【杭电】[1242]Rescue
    【杭电】[1787]GCD Again
    【算法】欧拉函数——小于n的数中与n互质数的数目
    【HPU】[1738]Stack ? Queue ?
    【HPU】[1737]老王特警队
  • 原文地址:https://www.cnblogs.com/sunshine233/p/15740624.html
Copyright © 2011-2022 走看看