效果图

使用 jsQR

jsQR 官网

jsQR 是一个纯 JavaScript 二维码解析库。该库读取原始图像或者是摄像头，并将定位，提取和解析其中的任何 QR 码。

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

2、 jsQR 方法使用实例：前端 js 解析识别图片二维码

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>