JS解析二维码 - 王盛博客 - 网圣课堂

这篇文章距离上次修改已过1211天，其中的内容可能已经有所变动。

阿里云2核2G3M不限新老用户99元（续费同价）
华为新用户2核1G2M1年29元（首年特惠/年抛）
服务器9.9元/年（10个固定IPV6可当挂机宝）
免费GPT3.5，也有收费的GPT-4
免费CDN带WAF防火墙不限流量

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>图片二维码识别</title>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cozmo.github.io/jsQR/jsQR.js"></script>
    </head>
    <body>
        <span lan_id="bc">选择图片</span> <input type="file"  id="pictureChange"/>
        <div>
            <h2>识别结果：</h2>
            <div id="result">
            </div>
        </div>
    </body>
    <script type="text/javascript">
        $("body").append('<canvas id="qrcanvas" style="display:none;"></canvas>')
        $("#pictureChange").change(function (e) {
            var file = e.target.files[0];
            if(window.FileReader) {
                var fr = new FileReader();
                fr.readAsDataURL(file);
                fr.onloadend = function(e) {
                    var 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){
                    showCode(code.data)
                }else{
                    alert("识别错误")
                }
            };
        }
        function showCode(code){
            $("#result").append(code)
        }
    </script>
</html>

本文地址：https://wangsheng.cc/post/36.html

打赏名单

不分博文，不定期整理近期数据，感谢各位打赏，如有需求请在扫码后的备注填写

网名	打赏金额（元）	网名	打赏金额（元）
火舞艳阳☀	50	*帆（喝奶茶）	7
*宇	1	杨*8	5
乖乖鲁	1	linyi	2
*人	2	a*9	1
张九今	500

36 JS解析二维码

打赏名单

评论已关闭