精华内容
下载资源
问答
  • h5页面实现扫码功能
    千次阅读
    2021-04-19 14:07:36

    目前在做一个移动端扫码功能,发现市面上h5实现扫码功能的案例很少,quagga.js 已经很久没有维护了,而且识别率低,根本用不了

    使用webrtc和python 图片识别库实现 h5 页面扫码功能

    1. 使用getUserMedia 获取媒体流
    2. 使用video标签播放媒体流
    3. 使用canvas 将video 截图
    4. 使用定时器定时发送图片到 后端 Python 识别图片

    代码 (本代码需要https 协议 getUserMedia(兼容查看) 和本地才能跑通 )

    var video = document.querySelector(".bar_video");
    var canvas = document.createElement("canvas");
    var context = canvas.getContext("2d");
    canvas.width = 640;
    canvas.height = 480;
    var constraints = { video: { facingMode: "environment" } };
    navigator.mediaDevices
      .getUserMedia(constraints)
      .then(function (mediaStream) {
        video.srcObject = mediaStream;
        video.onloadedmetadata = function (e) {
          video.play();
        };
      })
      .catch(function (err) {
        console.log(err.name + ": " + err.message);
      });
    setInterval(function () {
      context.drawImage(
        video,
        0,
        0,
        (canvas.width = video.videoWidth),
        (canvas.height = video.videoHeight)
      );
      var image = canvas.toDataURL("image/png");
        $.ajax({
            url: "/product/code",
            type: "post",
            data:{
                phoneCode:image
            },
            success:function(res) {
             
              
            },
            error:function (err) {
               console.log(err) 
            }
          })
      
    }, 5000);
    

    后端代码

                imgbase = kw.get("phoneCode")  # 接受的图片
                imgbase=imgbase.split(",")[1]
                imgdata = base64.b64decode(imgbase)#解码
                url =os.path.join(os.path.abspath(os.path.dirname(__file__)),"0.png")
                file = open(url, 'wb')#保存为0.png的图片
                file.write(imgdata)
                file.close()
                image=cv2.imread(url)
                gray = cv2.cvtColor(image, cv2.COLOR_BGR2RGB)
                texts = pyzbar.decode(gray)
                print(texts)
                if texts == []:
                   return json.dumps({"state": 400})
                for text in texts:
                    code = text.data.decode("utf-8")
                    print(code)
    
    

    后端参考文章 https://blog.csdn.net/qq_37924224/article/details/109582507

    更多相关内容
  • 亲自测试可用,获取摄像头授权并扫码解码(二维码)成功,需要的可以自己扩展
  • vue+H5实现扫码条形码及二维码功能

    千次阅读 2021-09-15 16:39:00
    需求:尽在H5使用Js 完成扫码功能,不依托客户端支持; 思路:使用video吊起后台摄像头 + 条形码解析插件; 本文使用的框架有Vue + Vant + @zxing/library ,提示this.$message等方式不必使用Vant可以用自己框架; ...

    前言

    需求:尽在H5使用Js 完成扫码功能,不依托客户端支持;
    思路:使用video吊起后台摄像头 + 条形码解析插件;
    本文使用的框架有Vue + Vant + @zxing/library ,提示this.$message等方式不必使用Vant可以用自己框架;

    npm install  Vue  Vant  @zxing/library -S
    

    效果

    在这里插入图片描述

    代码

    <template>
      <section class="section">
        <div class="page bgc-f4f4f4">
        	<video ref="video" id="video" class="video vjs-fluid" autoplay></video>
        	<div v-show="tipShow" class="tip">{{tipMsg}}</div>
      	</div>
      <!-- 表单信息展示 没有展示需求可以不用 以上代码已经完成扫码功能 -->
        <div class="orderInfo">
          <van-cell-group >
            <van-field
              v-model="value"
              center
              clearable
              label="商品条码"
              placeholder="请输入商品条码"
            >
            <template #button>
              <van-button  type="info"  @click="searchInfo">查询</van-button>
            </template>
          </van-field>
        </van-cell-group>
          <van-card
            :num="productInfo.num"
            :tag="productInfo.tag"
            :price="productInfo.price"
            :desc="productInfo.desc"
            :title="productInfo.title"
            :thumb="productInfo.thumb"
          />
        </div>
      </section>
    </template>
    <script type="text/ecmascript-6">
    import { BrowserMultiFormatReader } from '@zxing/library';
    export default {
      name: 'qr-code-search',
      components: {},
      data() {
        return {
          value: '',//关联的输入框值
          productInfo: {
            title: '商品0316',
            thumb: 'https://img01.yzcdn.cn/vant/ipad.jpeg',
            num: '2',
            price: '17999.00',
            tag: '已出售',
            desc: '规格:红色/S',
          },
          codeReader: new BrowserMultiFormatReader(),
          textContent: null,
          tipMsg: '请扫描条码,正在尝试识别....',
          tipShow: false
        };
      },
      created() {
        this.openScan();
      },
      methods: {
        async openScan() {
          const that = this;
          that.codeReader.getVideoInputDevices().then((videoInputDevices) => {
            that.tipShow = true;
            that.tipMsg = '正在调用后置摄像头...';
            console.log('videoInputDevices', videoInputDevices);
            // 默认获取第一个摄像头设备id
            let firstDeviceId = videoInputDevices[0].deviceId;
            // 获取第一个摄像头设备的名称
            const videoInputDeviceslablestr = JSON.stringify(videoInputDevices[0].label);
            if (videoInputDevices.length > 1) {
              // 判断是否后置摄像头
              if (videoInputDeviceslablestr.indexOf('back') > -1) {
                firstDeviceId = videoInputDevices[0].deviceId;
              } else {
                firstDeviceId = videoInputDevices[1].deviceId;
              }
            }
            that.decodeFromInputVideoFunc(firstDeviceId);
          }).catch((err) => {
            that.tipShow = false;
            this.$message.error(err);
          });
        },
        decodeFromInputVideoFunc(firstDeviceId) {
          const that = this;
          that.codeReader.reset(); // 重置
          that.textContent = null; // 重置
          that.codeReader.decodeFromInputVideoDeviceContinuously(firstDeviceId, 'video', (result, err) => {
            that.tipMsg = '正在尝试识别...';
            that.textContent = null;
            if (result) {
              console.log(result);
              that.textContent = result.text;
              if (that.textContent) {
                if (that.textContent == this.value) return false; //新值和旧值相同时,不做交互;
                that.tipShow = false;
                that.msgBoxFunc(that.textContent);
              }
            }
            if (err && !(err)) {
              that.tipMsg = '识别失败';
              setTimeout(() => {
                that.tipShow = false;
              }, 2000);
              console.error(err);
            }
          });
        },
        searchInfo() {
          if (!this.value || this.value == '') return this.$message.error('条码为空,请扫码或输入商品条码!');
          console.log(this.value); // 请求查询
        },
        msgBoxFunc(textContent) {
          this.$message.success(`条码:${textContent}`);
          this.tipMsg = textContent;
          this.value = textContent;
        },
      }
    };
    </script>
    <style scoped>
      /*vjs-fluid 自适video 长宽*/
      .video{
        margin-top: 5px;
        width: 100%;
        height: 90%;
      }
      .tip{
        color: white;
        font-size: 16px;
      }
      /* common */
      .bgc-f4f4f4{
        background-color: #363636;
      }
        .section{
          min-height: 100vh;
        background-color: #f5f8fa;
      }
      .page{
        position: relative;
        height: 260px;
      }
      .orderInfo{
        padding: 3vw;
      }
      .orderInfo .van-card{
        background: #fff;
      }
    </style>
    

    结语

    over~
    如果本文对你有帮助的话,请不要忘记给我一键三连打call哦~o( ̄▽ ̄)do

    展开全文
  • 个人预览页面网址只扫码二维码 GitHub jsQR inde.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>图片二维码识别</title> <script src=...

    方式一. 只识别二维码

    实现方式一 jsQR

    个人预览页面网址只扫码二维码
    GitHub jsQR
    inde.html

    <!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" accept="image/*" multiple  id="pictureChange"/>
            <div>
                <h2>识别结果:</h2>
                <ul id="result">
                </ul>
            </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("<li>"+code+"</li>")
            }
        </script>
    </html>
    

    实现方式二 jsqrcode

    个人预览页面网址只扫码二维码2
    原页面网址webqr.com
    GitHub jsqrcode

    index.html

    <!-- saved from url=(0028)https://webqr.com/index.html -->
    <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <meta name="description" content="QR Code scanner">
      <meta name="keywords" content="qrcode,qr code,scanner,barcode,javascript">
      <meta name="language" content="English">
      <meta name="copyright" content="Lazar Laszlo (c) 2011">
      <meta name="Revisit-After" content="1 Days">
      <meta name="robots" content="index, follow">
      
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web QR</title>
    
    <style type="text/css">
    body{
        width:100%;
        text-align:center;
    }
    img{
        border:0;
    }
    #main{
        margin: 15px auto;
        background:white;
        overflow: auto;
    	width: 100%;
    }
    #header{
        background:white;
        margin-bottom:15px;
    }
    #mainbody{
        background: white;
        width:100%;
    	display:none;
    }
    #footer{
        background:white;
    }
    #v{
        width:320px;
        height:240px;
    }
    #qr-canvas{
        display:none;
    }
    #qrfile{
        width:320px;
        height:240px;
    }
    #mp1{
        text-align:center;
        font-size:35px;
    }
    #imghelp{
        position:relative;
        left:0px;
        top:-160px;
        z-index:100;
        font:18px arial,sans-serif;
        background:#f0f0f0;
    	margin-left:35px;
    	margin-right:35px;
    	padding-top:10px;
    	padding-bottom:10px;
    	border-radius:20px;
    }
    .selector{
        margin:0;
        padding:0;
        cursor:pointer;
        margin-bottom:-5px;
    }
    #outdiv
    {
        width:320px;
        height:240px;
    	border: solid;
    	border-width: 3px 3px 3px 3px;
    }
    #result{
        border: solid;
    	border-width: 1px 1px 1px 1px;
    	padding:20px;
    	width:70%;
    }
    
    ul{
        margin-bottom:0;
        margin-right:40px;
    }
    li{
        display:inline;
        padding-right: 0.5em;
        padding-left: 0.5em;
        font-weight: bold;
        border-right: 1px solid #333333;
    }
    li a{
        text-decoration: none;
        color: black;
    }
    
    #footer a{
    	color: black;
    }
    .tsel{
        padding:0;
    }
    
    </style>
    
    <!-- <script type="text/javascript" async="" src="ga.js"></script> -->
    <script type="text/javascript" src="llqrcode.js"></script>
    <!-- <script type="text/javascript" src="plusone.js"></script> -->
    <script type="text/javascript" src="webqr.js"></script>
    <style type="text/css">
          @font-face {
              font-family: "element-icons";
              src: url('chrome-extension://moombeodfomdpjnpocobemoiaemednkg/fonts/element-icons.woff') format('woff'),
              url('chrome-extension://moombeodfomdpjnpocobemoiaemednkg/fonts/element-icons.ttf ') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
          }
      </style></head>
    
    <body>
    <div id="main">
    <div id="header">
    <div style="position:relative;top:+20px;left:0px;"><g:plusone size="medium"></g:plusone></div>
    <p id="mp1">
    QR Code scanner
    </p>
    </div>
    <div id="mainbody" style="display: inline;">
    <table class="tsel" border="0" width="100%">
    <tbody><tr>
    <td valign="top" align="center" width="50%">
    <table class="tsel" border="0">
    <tbody><tr>
    <!-- <td><img class="selector" id="webcamimg" src="vid.png" onclick="setwebcam()" align="left" style="opacity: 0.2;"></td> -->
    <td><img class="selector" id="qrimg" src="cam.png" onclick="setimg()" align="right" style="opacity: 1;"></td></tr>
    <tr><td colspan="2" align="center">
    <div id="outdiv"><div id="qrfile"><canvas id="out-canvas" width="320" height="240"></canvas><div id="imghelp">drag and drop a QRCode here<br>or select a file<input type="file" accept="image/*" multiple onchange="handleFiles(this.files)"></div></div></div></td></tr>
    </tbody></table>
    </td>
    </tr>
    <tr><td colspan="3" align="center">
    <img src="down.png">
    </td></tr>
    <tr><td colspan="3" align="center">
    <div id="result"></div>
    </td></tr>
    </tbody></table>
    <script>
    </script>
    </div>&nbsp;
    <div id="footer">
    
    </div>
    </div>
    <canvas id="qr-canvas" width="800" height="600" style="width: 800px; height: 600px;"></canvas>
    <script type="text/javascript">load();</script>
    
    
    </body></html>
    

    llqrcode.js 及 webqr.js 已上传资源在我的csdn资源 或者直接去预览网址保存页面下载
    个人csdn资源demo源码Web QR_files.rar

    方式二 只识别条形码 quaggaJS

    个人预览页面网址只识别条形码
    GitHub demo页面网址quaggaJS/examples/file_input.html

    GitHub quaggaJS
    index.html

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    
    <body>
        <section id="container" class="container">
            <div class="controls">
                <fieldset class="input-group">
                    <input type="file" accept="image/*;capture=camera">
                    <button id="btnIdents">识别</button>
                </fieldset>
            </div>
            <div id="interactive" class="viewport"><br clear="all"></div>
        </section>
        <script src="https://cdn.bootcss.com/jquery/2.0.3/jquery.js" type="text/javascript"></script>
        <script src="./js/quagga.js" type="text/javascript"></script>
        <!-- <link rel="stylesheet" type="text/css" href="./css/fileinput.css"> -->
        <script src="./js/file_input.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function () {
                var App = {
                    init: function () {
                        App.attachListeners();
                    },
                    attachListeners: function () {
                        var self = this;
                        $("#btnIdents").on("click", function (e) {
                            var input = document.querySelector(".controls input[type=file]");
                            if (input.files && input.files.length) {
                                App.decode(URL.createObjectURL(input.files[0]));
                            }
                        });
                    },
                    decode: function (src) {
                        var self = this,
                            config = $.extend({}, self.state, {
                                src: src
                            });
                        Quagga.decodeSingle(config, function (result) {
                            //识别结果
                            if (result.codeResult) {
                                console.log(result.codeResult.code);
                                alert("图片中的条形码为:" + result.codeResult.code);
                            } else {
                                alert("未识别到图片中的条形码!");
                            }
                        });
                    },
                    state: {
                        inputStream: {
                            size: 800,
                            singleChannel: false
                        },
                        locator: {
                            patchSize: "medium",
                            halfSample: true
                        },
                        decoder: {
                            readers: [{
                                format: "code_128_reader",
                                config: {}
                            }]
                        },
                        locate: true,
                        src: null
                    }
                };
    
                App.init();
            });
        </script>
    </body>
    
    </html>
    

    quagga.js及file_input.js 已上传csdn 我的资源 或者预览页面保存下载
    个人csdn资源demo源码quaggademo.rar

    方式三. 识别二维码及条形码

    方式一 zxing-js

    注意:zxing 采用摄像头解析 浏览器为了安全 只有https协议下或者本地localhost可访问摄像头
    个人预览页面网址zxing 摄像头识别二维码及条形码
    GitHub zxing-js 摄像头扫码 demo页面网址https://zxing-js.github.io/library/examples/multi-camera/
    GitHub zxing-js 所有demo页面网址ZXing TypeScript Examples
    GitHub zxing
    GitHub zxing-js
    index.html

    <!doctype html>
    <html lang="en">
    
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <meta name="author" content="ZXing for JS">
    
      <title>扫码二维码及条形码 ZXing TypeScript | Decoding from camera stream</title>
    
      <link rel="stylesheet" rel="preload" as="style" onload="this.rel='stylesheet';this.οnlοad=null" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
      <link rel="stylesheet" rel="preload" as="style" onload="this.rel='stylesheet';this.οnlοad=null" href="https://unpkg.com/normalize.css@8.0.0/normalize.css">
      <link rel="stylesheet" rel="preload" as="style" onload="this.rel='stylesheet';this.οnlοad=null" href="https://unpkg.com/milligram@1.3.0/dist/milligram.min.css">
    </head>
    
    <body>
    
      <main class="wrapper" style="padding-top:2em">
    
        <section class="container" id="demo-content">
          <!-- <h1 class="title">Scan Aztec Code from Video Camera</h1> -->
    
          <p>
            <a class="button-small button-outline" href="../../index.html">HOME ??</a>
          </p>
    <!-- 
          <p>This example shows how to scan an Aztec code with ZXing javascript library from the device video camera. If more
            than one video input devices are available (for example front and back camera) the example shows how to read
            them and use a select to change the input device.</p> -->
    
          <div>
            <a class="button" id="startButton">Start</a>
            <a class="button" id="resetButton">Reset</a>
          </div>
    
          <div>
            <video id="video" width="300" height="200" style="border: 1px solid gray"></video>
          </div>
    
          <div id="sourceSelectPanel" style="display:none">
            <label for="sourceSelect">Change video source:</label>
            <select id="sourceSelect" style="max-width:400px">
            </select>
          </div>
    
          <label>Result:</label>
          <blockquote>
            <p id="result"></p>
          </blockquote>
    
          <p>See the <a href="https://github.com/zxing-js/library/tree/master/docs/examples/qr-camera/">source code</a> for
            this example.</p>
        </section>
    <!-- 
        <footer class="footer">
          <section class="container">
            <p>ZXing TypeScript Demo. Licensed under the <a target="_blank"
                href="https://github.com/zxing-js/library#license" title="MIT">MIT</a>.</p>
          </section>
        </footer> -->
    
      </main>
    
      <!-- <script type="text/javascript" src="https://unpkg.com/@zxing/library@latest"></script> -->
      <!-- <script type="text/javascript" src="./js/library@0.18.6.min.js"></script> -->
      <script type="text/javascript" src="./js/library.min.js"></script>
      <script type="text/javascript">
        window.addEventListener('load', function () {
          let selectedDeviceId;
          const codeReader = new ZXing.BrowserAztecCodeReader();
          console.log('ZXing code reader initialized')
          codeReader.getVideoInputDevices()
            .then((videoInputDevices) => {
              const sourceSelect = document.getElementById('sourceSelect')
              selectedDeviceId = videoInputDevices[0].deviceId
              if (videoInputDevices.length >= 1) {
                videoInputDevices.forEach((element) => {
                  const sourceOption = document.createElement('option')
                  sourceOption.text = element.label
                  sourceOption.value = element.deviceId
                  sourceSelect.appendChild(sourceOption)
                })
    
                sourceSelect.onchange = () => {
                  selectedDeviceId = sourceSelect.value;
                };
    
                const sourceSelectPanel = document.getElementById('sourceSelectPanel')
                sourceSelectPanel.style.display = 'block'
              }
    
              document.getElementById('startButton').addEventListener('click', () => {
                codeReader.decodeFromInputVideoDevice(selectedDeviceId, 'video').then((result) => {
                  console.log(result)
                  // alert(result);
                  document.getElementById('result').textContent = result.text
                }).catch((err) => {
                  console.error(err)
                  // alert(err);
                  document.getElementById('result').textContent = err
                })
                console.log(`Started continous decode from camera with id ${selectedDeviceId}`)
              })
    
              document.getElementById('resetButton').addEventListener('click', () => {
                codeReader.reset()
                document.getElementById('result').textContent = '';
                console.log('Reset.')
              })
    
            })
            .catch((err) => {
              console.error(err)
            })
        })
      </script>
    
    </body>
    
    </html>
    

    library.min.js 已上传我的csdn资源 或者预览页面保存下载
    个人csdn资源demo源码librarydemo.rar

    方式二 综合 jsqrcode 及quaggaJS 实现文件上传识别二维码及条形码

    总结

    写到这里也结束了,在文章最后放上一个小小的福利,以下为小编自己在学习过程中整理出的一个关于 前端开发 的学习思路及方向。从事互联网开发,最主要的是要学好技术,而学习技术是一条慢长而艰苦的道路,不能靠一时激情,也不是熬几天几夜就能学好的,必须养成平时努力学习的习惯,更加需要准确的学习方向达到有效的学习效果。

    由于内容较多就只放上一个大概的大纲,需要更及详细的学习思维导图的 点击我的GitHub免费获取
    还有免费的 高级web全套视频教程 前端架构 H5 vue node 小程序 视频+资料+代码+面试题!

    全方面的web前端进阶实践技术资料,并且还有技术大牛一起讨论交流解决问题。

    展开全文
  • h5-scan扫码h5扫码模拟原生扫码功能
  • 调出摄像头,拍照保存到画布,定时传送到解析函数 ...解析函数是后台c# .net MVC 实现的,解析函数用到的二维码解析API依赖于第三方二维码库google zxing , 因此需要先引用类库:zxing.dll、zxing.presentation.dll
  • H5扫码功能实现

    千次阅读 2020-07-29 14:15:47
    H5扫码功能的实现 功能实现要用到H5+ 1.首先需要下载Hbuilder,然后创建H5+项目。再把自己的项目文件替换到新创建的项目里。项目要引入common.js 2.添加一个扫码按钮,给按钮添加点击事件 $(".Scan-three").on(...

    H5扫码功能的实现

    功能实现要用到H5+

    1.首先需要下载Hbuilder,然后创建H5+项目。再把自己的项目文件替换到新创建的项目里。项目要引入common.js
    2.添加一个扫码按钮,给按钮添加点击事件
    $(".Scan-three").on("click",function(){
      openBarcode()
    })
    //打开扫码界面
    function openBarcode() {
      createWithoutTitle('barcode_scan.html', {
        titleNView: {
          type: 'float',
          backgroundColor: 'rgba(215,75,40,0.3)',
          titleText: '扫一扫',
          titleColor: '#FFFFFF',
          autoBackButton: true,
          buttons: [
            {
              fontSrc: '_www/helloh5.ttf',
              text: '\ue401',
              fontSize: '18px',
              onclick: 'javascript:switchFlash()',
            },
          ],
        },
      })
    }
    function scaned(t, r) {
      //扫码结果返回这里
    console.log(t+r)
    }
     
    
    3.新创建一个html,Scan扫码界面代码:
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <meta
          name="viewport"
          content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
        />
        <meta name="HandheldFriendly" content="true" />
        <meta name="MobileOptimized" content="320" />
        <title>Scan</title>
        <link rel="stylesheet" href="css/common.css" type="text/css" charset="utf-8" />
        <style type="text/css">
          #bcid {
            width: 100%;
            position: absolute;
            top: 0px;
            bottom: 0px;
            text-align: center;
          }
    
          .tip {
            color: #ffffff;
            font-weight: bold;
            text-shadow: 0px -1px #103e5c;
          }
        </style>
      </head>
      <body style="#000000;">
        <div id="bcid">
          <div style="height: 40%;"></div>
          <p class="tip">...载入中...</p>
        </div>
      </body>
      
      <script src="js/scan.min.js"></script>
      <script type="text/javascript" src="js/common.js"></script>
    </html>
    

    4.Scan扫码界面js

    var ws = null,
      wo = null
    var scan = null
    // H5 plus事件处理
    function plusReady() {
      // 获取窗口对象
      ws = plus.webview.currentWebview()
      wo = ws.opener()
      // 开始扫描
      ws.addEventListener(
        'show',
        function () {
          scan = new plus.barcode.Barcode('bcid')
          scan.onmarked = onmarked
          scan.start({})
          createSubview()
        },
        false
      )
    
      // 显示页面并关闭等待框
      ws.show('pop-in')
    }
    document.addEventListener('plusready', plusReady, false)
    
    // 二维码扫描成功
    
    function onmarked(type, result) {
      switch (type) {
        case plus.barcode.QR:
          type = 'QR'
          break
        case plus.barcode.EAN13:
          type = 'EAN13'
          break
        case plus.barcode.EAN8:
          type = 'EAN8'
          break
        default:
          type = '其它' + type
          break
      }
      result = result.replace(/\r\n/g, '')
      wo.evalJS("scaned('" + type + "','" + result + "')")// 里面的方法自己创建自己需要的功能
      back()
    }
    
    // 创建子窗口
    function createSubview() {
      //
    }
    // 开关闪光灯
    var bFlash = false
    var AVCaptureDevice = null
    var Camera = null
    
    function switchFlash() {
      bFlash = !bFlash
      scan.setFlash(bFlash)
      ws.setStyle({
        titleNView: {
          buttons: [
            {
              fontSrc: '_www/helloh5.ttf',
              text: bFlash ? '\ue400' : '\ue401',
              fontSize: '18px',
              onclick: 'javascript:switchFlash()',
            },
          ],
        },
      })
    }
    

    5.效果图
    扫码界面
    在这里插入图片描述

    展开全文
  • vue基于H5+扫码demo演示 如何使用 1.Clone ,然后终端进入项目根目录。 2.打开Hbuilder,打开目录,将目录指向 /dist ,然后添加Hbuilder中manifest.json,真机usb连接运行。 3.真机依次点击1、2、3、4按钮查看演示...
  • H5实现网页扫码.zip

    2021-10-17 11:44:46
    H5实现网页扫码.zip
  • 最近做了个项目,项目本身没什么复杂的,就是其中有一个功能是要求调用手机摄像头扫描并识别二维码,最后还要打包成一个App。...前端界面没什么说的,这里要说的是在实现扫码功能和 App 打包的时候会碰到的坑...
  • H5调用本地摄像头实现扫一扫的功能实现。
  • h5实现微信扫码

    千次阅读 2018-11-30 02:16:33
    demo地址:https://fastcreator.github.io/qrcodeScan/dist/index.html扫码访问源码地址:https://github.com/fastCreator/qrcodeScan编码过程使用webpack打包,开发项目,webpack-dev-server进行本地开发调试根据...
  • 基于浏览器实现二维码扫码增强版-带视频演示Safari浏览器亲测效果基于H5流媒体,调用手机摄像头实现扫码基于URL Scheme,调用第三方APP实现扫码 模拟app扫码效果,支持前置摄像头后置摄像头切换,纯js+h5+css3实现,...
  • Uniapp h5扫码功能

    2022-04-06 20:48:04
    展示扫码界面 开始扫码 //关闭扫码窗口 hideScanModal() { this.modalName = null; this.stop(); }, getCameras() { Html5Qrcode.getCameras() .then((devices) => { /** * ...
  • 运用 MUI 技术 实现扫码功能: 1、在 mainjs 中引入 mui 2、在首页扫码图标中添加扫码点击事件 触发路由跳转 3、扫码页面的代码,方便下次使用就直接粘出来了,有需要的自己搬,根据需求做更改 <...
  • 扫码页面 <template> <div class="scan"> <div class="nav"> <!-- <a class="close" @click="handleLast()"></a> --> <p class="title">扫一扫</p> </div&...
  • 微信扫码支付和H5支付demo,springboot工程,下载后修改application.properties中的微信支付参数,然后接启动项目;浏览器访问:http://localhost:8080/index.html
  • 主要介绍了java实现简单扫码登录功能(模仿微信网页版扫码),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 如下两行代码来实现其他扫码枪的扫码功能。 filter.addAction("android.intent.action.SCANRESULT");//监听扫描广播 指定广播地址 var result = intent.getStringExtra("value"); //返回结果 IData T1根据
  • 微信H5扫码
  • H5扫码特效,可以做二维码识别,银行卡识别,提交给接口
  • uniapp实现H5扫码功能

    2021-10-09 15:29:38
    调用相机并结合qrcode.js解析二维码来实现 qrcode.js源码链接 <!-- html部分(简单的icon图标) --> <template> <view class=""> <u-icon name="scan" size="100" @click="scanCode()">...
  • h5网页扫码实现起来比较困难,在微信中我们可以借助微信的api,实际很多都是微信做的工作。但是单纯的移动浏览器中呢?我之前探索过多次都是无果,网上也查阅了很多资料,并不是那么顺利。很多人都是退而求其次采用....
  • 前端H5微信实现扫码
  • 如图这是我在网上找的一个方法,使用h5的Barcode实现扫码的功能,但代码报错 'plus' is not defined ,是什么原因呢?,现在在手机上真机测试点击扫描也没反应,没调取摄像头,有老师知道什么原因吗?需求是前端实现...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,383
精华内容 2,153
关键字:

h5实现扫码