html5读取二维码

所属分类:其他-独立的部件

 63090  434  查看评论 (29)
分享到微信朋友圈
X
html5读取二维码 ie兼容10
相关插件-独立的部件

jQuery二维码生成插件qrcode.js

应用小工具二维码生成
  独立的部件
 40443  477

新浪天气、时间获取插件

LeoWeather 是一款专门用来获取天气和时间的插件,本插件自创的标签模式使得用户可以更好的对显示内容进行排版!
  独立的部件
 57609  501

jQuery漂亮的CSS3颜色渐变选择器

jQuery漂亮的CSS3颜色渐变选择器可直接生成各种CSS渐变代码,功能强大!
  独立的部件
 30915  324

jQuery实现弹幕实例

一个很好用的实例,适合新手
  独立的部件
 30357  332

讨论这个项目(29)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    秋风 0
    2021/2/24 10:13:09
    扫一扫摄像头拉不出来嘛! 回复
    晚、安。 0
    2019/9/9 17:18:33
    摄像头调不出来啊
    回复
    ㄌCα∝新ㄋ 0
    2019/5/15 22:56:13
    不是吧~~~~~~~~~~~~~~ 回复
    BWmelon 0
    2019/1/5 15:12:54
    不支持扫描微信二维码,怎么改代码
        L&&K0
        2019/1/29 14:31:21

        引入llqrcode.js可以用但是llqrcode不知道是不是开源的

         <video id="video" style=" width: 100%; height: 200px;"></video>
              <canvas id="canvas" style=" width: 100%; height: 200px;" width="100%" height="200"></canvas>
        
              var content = "";
               navigator.getUserMedia({
                   video: true
               }, function (stream) {
                   var URL = window.URL || window.webkitURL; // 获取到window.URL对象
                   video.src = URL.createObjectURL(stream);  // 将获取到的视频流对象转换为地址  
                   video.play();
        
                   //当目前的播放位置已更改时
                   video.ontimeupdate = function () {
                       var canvas = document.getElementById('canvas');
                       var ctx = canvas.getContext('2d');
                       var width = Number($(video).css("width").replace("px", ""));
                       var height = Number($(video).css("height").replace("px", ""));
                       canvas.width = width;
                       canvas.height = height;
                       ctx.drawImage(video, 0, 0, width, height);
        
                       var imgFile = convertBase64UrlToBlob(canvas.toDataURL());
                       qrcode.decode(getObjectURL(imgFile));
                       qrcode.callback = function (imgMsg, a, b) {
                           if (imgMsg.indexOf("error") != -1) return;
                           console.log("imgMsg111111", imgMsg);
                           if (!content) {
                               content = imgMsg;
                           }
                           video.pause();
                       }
                   }
               }, function (error) {
                   console.log(error.name || error);
               });
        L&&K0
        2019/1/29 14:32:17
        //获取预览图片路径
        var getObjectURL = function(file) {
            var url = null;
            if (window.createObjectURL != undefined) { // basic
                url = window.createObjectURL(file);
            } else if (window.URL != undefined) { // mozilla(firefox)
                url = window.URL.createObjectURL(file);
            } else if (window.webkitURL != undefined) { // webkit or chrome
                url = window.webkitURL.createObjectURL(file);
            }
            return url;
        }
        
        
        /**  
         * 将以base64的图片url数据转换为Blob  
         * @param urlData  
         *            用url方式表示的base64图片数据  
         */
        function convertBase64UrlToBlob(urlData) {
        
            var bytes = window.(urlData.split(',')[1]); //去掉url的头,并转换为byte  
        
            //处理异常,将ascii码小于0的转换为大于0  
            var ab = new ArrayBuffer(bytes.length);
            var ia = new Uint8Array(ab);
            for (var i = 0; i < bytes.length; i++) {
                ia[i] = bytes.charCodeAt(i);
            }
        
            return new Blob([ab], {
                type: 'image/png'
            });
        }
    回复
    盈强软件 0
    2018/11/2 15:00:39

    不能用!

        西瓜0
        2018/11/2 15:12:35
        刚测试可以使用,需要https://下测试。 http上是不行的。
    回复
    WILD。 0
    2018/1/24 11:45:27

    不能扫描怎么解决

    回复
    WILD。 0
    2018/1/24 10:27:13

    不能扫描怎么解决

    回复
    正儿八经的胡说八道?? 0
    2017/12/15 11:05:40

    摄像头调不出来,navigator.getUserMedia这个方法过期了,可以尝试navigator.mediaDevices.getUserMedia,但是必须在https协议下用

        WILD。0
        2018/1/24 11:32:47

        有做好的吗  大神!

    回复
    吴下阿蒙 0
    2017/11/29 20:27:04
    0
    2017/8/31 14:25:48

    只有拍照功能出现了,兼容不好

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复