纯HTML5+js 实现二维码扫描及拍照上传

最新推荐文章于 2024-09-14 09:02:44 发布
最新推荐文章于 2024-09-14 09:02:44 发布
阅读量7.3k 收藏 17
点赞数 6
分类专栏： 程序进阶
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a549244570/article/details/102741407
版权

上头最近新提的需求，要求web端实现扫描识别二维码自动跳转页面，并且其他二维码扫描工具扫描出来的结果，与本站点扫描出来的结果不一样

首先分析需求，这种功能一般用于移动设备，PC用的比较少。与其他工具扫描结果不一样，则需要在获取扫描结果后，做相应的操作。

思路：1.生成二维码时，往数据库加入短地址（随机生成，可以是6位大小写英文）与长地址（加密，并生成生成一串MD5附加在后面）

2.获取二维码扫描结果后，首先对二维码中的短地址进行查询，找到对应的长地址，对长地址进行一系列的解密操作，解密过后得到对应的解密数据，并再次生成MD5，与长地址中的MD5进行对比，一致则进入下一步操作，不一致则说明长地址被篡改。验证当前登录用户与生成二维码的用户（长地址中获取）是否一致，必须一致才可以跳转（因为我这边扫描二维码得到的都是私人信息）否则私人信息可能被盗取。

这里就贴上调用摄像头的代码，至于加密解密，可自行百度

HTML代码

<a id="scan" href="javascript:void(0)">二维码扫描</a>

<div hidden="hidden">
    <div id="divQRScan">
        <div class="tab-content">
            <!-- 由于llqrcode.js中写死了id，所以id必须为qr-canvas -->
            <video id="QRvideo" muted autoplay playsinline width="400" height="500"></video>
            <canvas id="qr-canvas" style="display:none;"></canvas>
        </div>
    </div>
</div>

<script src="@Url.Content("~/Scripts/QRCodeScan/llqrcode.js")"></script>
<script src="@Url.Content("~/Scripts/QRCodeScan/QRScan.js")"></script>

javascript代码（QRScan.js）

const Scan = {

    videoInputDevice: [], //设备列表

    videoElement: document.getElementById("QRvideo"),

    canvasElement: document.getElementById("qr-canvas"),

    decodeTimer: null,

    canvasTimer: null,

    canvasContext: document.getElementById("qr-canvas").getContext("2d"),

    // 获取到的媒体设备

    gotDevices (deviceInfos) {

        let that = this;

        for (let i = 0; i !== deviceInfos.length; ++i) {

            let deviceInfo = deviceInfos[i];

            if (deviceInfo.kind === 'audioinput') {

                // 音频设备

            } else if (deviceInfo.kind === 'videoinput') {

                // 视频设备

                that.videoInputDevice.push(deviceInfo);

            } else {

                // 其他设备

                console.log('Found one other kind of source/device: ', deviceInfo);

            }

        }

    },

    getStream () {

        let that = this;

        if (window.stream) {

            window.stream.getTracks().forEach((track) => {

                track.stop();

            });

        }

        // if(that.isIOS){

        //     let constraints = {

        //         video: { facingMode: { exact: "environment" } }

        //       };

        //     console.log('3: ', constraints);

        //     // let constraints = {

        //     //   video: {

        //     //     // environment表示后置摄像头

        //     //     // user表示前置摄像头

        //     //     facingMode: ("environment")

        //     //   }

        //     // };

        // }else{

        let constraints = {

            // 包含audio 可声明音频设备调用

            // 声明视频设备调用

            // video: true

            video: {

                deviceId: {

                    // [1].deviceId 表示后置摄像头,默认开启的是前置摄像头

                    exact: that.videoInputDevice[1].deviceId

                }

            }

        };

        // }



        // 视频设备初始化

        navigator.mediaDevices.getUserMedia(constraints).then(that.gotStream.bind(that)).catch(that.handleError.bind(that));

        that.captureToCanvas();

        that.decode();

    },



    // 解码

    decode () {

        let that = this;

        try {

            qrcode.decode();

        } catch (e) {

            console.log('1:' + e);

        };

        that.decodeTimer = setTimeout(that.decode.bind(that), 100); // 解码频率为100毫秒一次

    },



    //将视频流放到画布

    captureToCanvas () {

        let that = this;

        try {

            // 根据视频大小设置canvas大小

            let w = that.videoElement.videoWidth;

            let h = that.videoElement.videoHeight;

            that.canvasElement.width = w;

            that.canvasElement.height = h;

            that.canvasContext.drawImage(that.videoElement, 0, 0, w, h);

        } catch (e) {

            console.log(e);

        };

        // 100毫秒绘制一次

        that.canvasTimer = setTimeout(that.captureToCanvas.bind(that), 100);

    },



    handleError (error) {

        $.colorbox.close();

        if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
            if (error.toString().indexOf("TypeError: Cannot read property 'deviceId' of undefined") != -1) {
                alert("无法访问摄像头！请授予手机浏览器摄像头权限或切换至有摄像头权限的浏览器!");
            }
        } else {
            console.log(error);
        }

        return;

    },



    gotStream (stream) {

        let that = this;

        window.stream = stream; // make stream available to console

        that.videoElement.srcObject = stream;

    },

    isIOS() {

        var u = navigator.userAgent;

        var IOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

        if (IOS) {

            return true;

        } else {

            return false;

        }

    },

    init () {

        let that = this;

        // API参考

        // https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/enumerateDevices

        // 先获取设备列表，方便调用后置摄像头

        let devices = navigator.mediaDevices.enumerateDevices().then(that.gotDevices.bind(that));

        document.querySelector('#scan').addEventListener('click', () => {

            $.colorbox({
                scrolling: true,
                overlayClose: true,
                reposition: false,
                innerWidth: "90%",
                innerHeight: "90%",
                maxWidth: "630px",
                maxHeight: "540px",
                inline: true,
                href: "#divQRScan"
            });

            that.videoElement.style.display = 'block';

            that.videoElement.play();

            devices.then(that.getStream.bind(that)).catch(that.handleError.bind(that));

            that.canvasContext.clearRect(0, 0, 300, 200);

            var hasRun = false; //避免重复执行回调函数

            //结果回调
            qrcode.callback = (e) => {

                if (!hasRun) {

                    // 清除画布，停止摄像头                  

                    clearTimeout(that.decodeTimer);

                    clearTimeout(that.canvasTimer);

                    that.canvasContext.clearRect(0, 0, 300, 200);

                    if (window.stream) {

                        window.stream.getTracks().forEach((track) => {

                            track.stop();

                        });

                    }

                    that.videoElement.style.display = 'none';

                    that.canvasElement.style.display = 'none';

                    e = e.replace("httq://", "http://").replace("httqs://", "https://"); //这里有时会把http识别为httq，可在这一步替换

                    $.colorbox.close();

                    if (e.indexOf("http://") != -1 || e.indexOf("https://") != -1) {

                        hasRun = true;

                        //这里可跳转到后台进行解密处理

                        window.location.href = e;

                    } else {

                        hasRun = false;

                        alert("扫描错误，请重试！");

                    }

                }

            }


        });

    }

};

Scan.init();

llqrcode.js可在百度下载，也可评论邮箱索要，代码直接复制粘贴后稍微修改便可使用，用到了colorbox（此插件百度jquery colorbox下载即可）

拍照上传大同小异，不需要llqrcode.js，只是对canvs操作（canvasContext就是扫描获得的图像），网上也有不少拍照上传的插件，如有需要请至蓝奏云下载（仅提供llqrcode.js）：https://wws.lanzoux.com/i6VpCg3kb3i

请大家不要再求源码了！！新建一个HTML页面，把上面的代码复制进去，相关的插件（colorbox，llqrcode.js）引用好（<script src=""></script>）运行即可，不会再报错！

君.
关注
专栏目录
通过二维码上传手机文件到服务器
dipoyu9446的博客
07-16 1403
Hello，大家好。这是我的第一篇博客，给大家分享下手机扫码上传图片到服务器实现手机pc同步. 1、自动生成二维码--> 可以去二维码生成工具网站获取api也可以直接用这个：http://qr.topscan.com/api.php?text= ？ 注意：问号代表二维码访问的路径如果后面跟www.baidu.com就会跳转百度 2、这里写了个h5页面用于手机扫一扫上...
html5扫描二维码
colored_glass的专栏
08-25 2085
html5扫描二维码，打开摄像头，canvas截取，ZXing解析。
前端黑科技：使用 JavaScript 实现网页扫码功能
服务员的博客
08-10 1291
调用设备摄像头，获取实时视频流。在网页上创建一个扫描区域，用户可以将二维码放置在该区域内进行扫描。使用jsQR库解码扫描区域内的二维码图像数据，获取二维码内容。提供手动输入二维码内容的功能。如果设备支持，还可以控制闪光灯的开关，以便在光线不足的情况下进行扫描。通过以上步骤，我们成功地使用 JavaScript 在网页端实现了二维码扫描功能。用户可以使用手机扫描网页上的二维码完成支付。用户可以扫描产品上的二维码，查看产品信息、生产日期、物流信息等。用户可以使用手机扫描二维码完成活动签到。
html5项目实现扫描二维码功能
qq_25523647的博客
05-13 453
实现原理：调取手机摄像头扫一扫功能实现注：调取手机摄像头需要再https协议下才可以，有的项目启动配置https:true可以实现启动的项目协议为https且可以访问，有的还是需要证书才能访问。
js上传图片 识别条形码
qq_37212332的博客
07-04 1027
js识别条形码 <script src="js/quagga.js"></script> <script type="text/javascript"> //上传图片 function change(event) { console.log(event.target.files); var file = event.targ...
JsQRScanner：一款强大的HTML5二维码扫描器
最新发布
gitblog_01103的博客
09-14 465
JsQRScanner：一款强大的HTML5二维码扫描器 JsQRScanner JavaScript QR Code scanner for HTML5 supporting browsers 项目地址: https://git...
探索HTML5 QRCodeScanner：一款轻巧强大的二维码扫描库
gitblog_00002的博客
03-21 791
探索HTML5 QRCodeScanner：一款轻巧强大的二维码扫描库 html5-qrcodeA cross platform HTML5 QR code reader. See end to end implementation at: https://scanapp.org项目地址:https://gitcode.com/gh_mirrors/ht/html5-qrcode 是一个基于Ja...
html5+js 实现二维码扫描
12-17
总结来说，HTML5+JS实现的二维码扫描是一种基于客户端的解决方案，它利用了HTML5的媒体API和JavaScript库，为用户提供了一种无需安装额外应用即可扫描二维码的方式。这种方法在移动设备上尤其便捷，可以广泛应用于...
HTML5+MUI实现手机app扫码功能
03-31
HTML5+MUI实现手机app扫码功能是一种常见且实用的技术应用，主要应用于移动互联网场景，如电商、支付、社交等领域。HTML5作为现代网页开发的标准，提供了许多增强用户体验的新特性，而MUI则是一个轻量级的前端框架，...
HTML5混合开发二维码扫描以及调用本地摄像头
09-28
本文将详细讲解如何在HTML5混合开发环境中实现二维码扫描功能并调用本地摄像头。 首先，HTML5提供了MediaDevices接口，该接口允许我们访问用户的媒体输入设备，如摄像头。通过调用`navigator.mediaDevices....
基于html5、JS实现的二维码扫码
01-26
调出摄像头，拍照保存到画布，定时传送到解析函数 ...解析函数是后台c# .net MVC 实现的，解析函数用到的二维码解析API依赖于第三方二维码库google zxing , 因此需要先引用类库：zxing.dll、zxing.presentation.dll
Html5实现二维码扫描并解析
01-21
引子： 最近公司项目有个需求，微博客户端中， h5 的页面上的某个按钮能够与native 交互呼起摄像头，扫描二维码并且解析。在非微博客户端中（微信或者是原生浏览器，如：safari）呼起系统的拍照或者上传图片按钮，通过拍照或者上传图片解析二维码。 第二种方案需要在前端 js 解析二维码。这样依赖一个第三方的解析库jsqrcode。这个库已经支持在浏览器端呼起摄像头的操作了，但是依赖一个叫getUserMedia的属性。该属性移动端的浏览器支持的都不是很好，所以只能间接的上传图片的方式解析二维码。 getUserMedia属性兼容浏览器列表： 首先感谢 jsqrcode 的开发者，提供这么
HTML5获取摄像头和视频控制接口进行扫描二维码示例
08-05
扫码示例亲测可以用，这个大家可以放心下载！！！扫码是通过jsQR库实现的，在vue环境也可以实现调用摄像头进行扫描二维码并且返回二维码链接的一个操作。示例是一个html和一个jsQR.js两个文件，想了解vue环境的代码怎么写的可以去看看我的写的文章。文章链接：https://blog.csdn.net/qq_34227291/article/details/107793197
JAVA整合HTML5实现扫描二维码功能项目源码
07-09
项目使用环境以及工具： Eclipse，JDK1.7，struts2，HTML5，Jquery,QRCode HTML5技术支持WebApp在手机上拍照，显示在页面上并上传到服务器。这是手机微博应用中常见的功能，当然你也可以在其它类型应用中适当使用此技术。
h5扫描二维码.zip
09-09
由html5页面调取手机摄像头中扫描工具，可识别所有二维码，整体环节不算很流畅，但是应对一般的需求还是没问题的，时间紧迫没时间做后期需优化。
html+js手机端拍照二维码跳转网页，pc端选择二维码跳转网页
02-15
本项目标题为“html+js手机端拍照二维码跳转网页，pc端选择二维码跳转网页”，这表明我们要探讨的是如何使用HTML和JavaScript技术在手机和PC两端实现二维码识别并跳转至特定网页的功能。下面我们将详细介绍这个过程...
使用html5-qrcode 扫描二维码(vue3)
m0_50864962的博客
07-04 6984
vue3 扫描识别二维码
H5实现扫描二维码
热门推荐
前端御书房
10-07 1万+
扫描二维码是app常用的一种基础功能，该功能使用户能够方便地登录、浏览网站、获取信息等操作，鉴于此，把该功能引入H5，利用H5实现扫描二维码功能在把扫描二维码功能引入H5的过程中，通过对比5中工具库找到了两种比较好用的第三方库。接下来就对这两种库进行记录。
【H5扫描二维码】
Genius_Leah的博客
05-22 1万+
H5实现二维码扫描
评论 108
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值