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>