tenc1239 2023-07-08 15:49 采纳率: 76%
浏览 26

vue 代码有备注行 时 ; 浏览器控制台 提示错误的行数不对?要在哪里配置?

vue 代码有备注行 时 ; 浏览器控制台 提示错误的行数不对?要在哪里配置?
vue 代码有备注行 时 ; 浏览器控制台 提示错误的行数不对?要在哪里配置?

  • 写回答

1条回答 默认 最新

  • CSDN-Ada助手 CSDN-AI 官方账号 2023-07-08 18:26
    关注
    • 这个问题的回答你可以参考下: https://ask.csdn.net/questions/7797289
    • 我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：实现多行文本“展开收起” 超过一定行数隐藏/显示 Vue组件
    • 除此之外, 这篇博客: 前端获取电脑摄像头权限并拍照进行人脸识别中的 代码在哪里啊？(只是一个demo 下个文章我会发项目中的部分代码基于vue的啊) 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

    • 就在下面了 哈哈

      
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>摄像头拍照</title>
</head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style>
        #capture{
            position: absolute;
            right: 190px;
            bottom: -40px;

        }
        #video{
            position: absolute;
            right: 0;
            top: 0;
        }
        #img{
            position: absolute;
            left: 0;
            top: 0;
        }
        .auto{
            position: absolute;
            left: 50%;
            top: 50%;
            height: 320px;
            margin-top: -160px;
        }
        #sure{
            position: absolute;
            left: 210px;
            bottom: -40px;

        }
        button{
            cursor: pointer;
            margin: 0 auto;
            border: 1px solid #f0f0f0;
            background: #5CACEE;
            color: #FFF;
            width: 100px;
            height: 36px;
            line-height: 36px;
            border-radius: 8px;
            text-align: center;
            /*禁止选择*/
            -webkit-touch-callout: none; /* iOS Safari */
            -webkit-user-select: none; /* Chrome/Safari/Opera */
            -khtml-user-select: none; /* Konqueror */
            -moz-user-select: none; /* Firefox */
            -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently not supported by any browser */
        }

</style>
<body>
    <div class="auto">
            <video id="video" width="480" height="320" autoplay></video>
            <canvas id="canvas" width="480" height="320" style="display: none;"></canvas>
            <img src="./body_default.png" id="img" width="480" height="320" style="margin-left: 20px;">
            <div>
                <button id="capture" title="点击进行拍照">拍照</button>
            </div>
            <div>
                <button id="sure" title="是否用这张图片进行验证">确认</button>
            </div>
    </div>
  

  <script>
    var file ,stream;
    //访问用户媒体设备的兼容方法
    function getUserMedia(constraints, success, error) {
      if (navigator.mediaDevices.getUserMedia) {
        //最新的标准API
        navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
      } else if (navigator.webkitGetUserMedia) {
        //webkit核心浏览器
        navigator.webkitGetUserMedia(constraints,success, error)
      } else if (navigator.mozGetUserMedia) {
        //firfox浏览器
        navigator.mozGetUserMedia(constraints, success, error);
      } else if (navigator.getUserMedia) {
        //旧版API
        navigator.getUserMedia(constraints, success, error);
      }
    }
 
    let video = document.getElementById('video');
    let canvas = document.getElementById('canvas');
    let context = canvas.getContext('2d');
 
    function success(stream) {
      //兼容webkit核心浏览器
      let CompatibleURL = window.URL || window.webkitURL;
      //将视频流设置为video元素的源
      console.log(stream);
      stream = stream;
      //video.src = CompatibleURL.createObjectURL(stream);
      video.srcObject = stream;
      video.play();
    }
 
    function error(error) {
      console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
    }
 
    if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
      //调用用户媒体设备, 访问摄像头
      getUserMedia({video : {width: 480, height: 320}}, success, error);
    } else {
      alert('不支持访问用户媒体');
    }
        // base64转文件

    document.getElementById('capture').addEventListener('click', function () {
      context.drawImage(video, 0, 0, 480, 320);      
        // 获取图片base64链接
        var image = canvas.toDataURL('image/png');
        // 定义一个img
        var img = document.getElementById("img");
        //设置属性和src
        //img.id = "imgBoxxx";
        img.src = image;
        //将图片添加到页面中
        //document.body.appendChild(img);
        function dataURLtoFile(dataurl, filename) {
            var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            file = new File([u8arr], filename, {type: mime});
            return new File([u8arr], filename, {type: mime});
        }
        console.log(dataURLtoFile(image, 'aa.png'));
    })

    document.getElementById('sure').addEventListener('click', function () {
        var formData = new FormData();
        formData.append("file",file);
        $.ajax({
            type: "POST", // 数据提交类型
            url: "***********", // 发送地址
            data: formData, //发送数据
            async: true, // 是否异步
            processData: false, //processData 默认为false，当设置为true的时候,jquery ajax 提交的时候不会序列化 data，而是直接使用data
            contentType: false,
            success:function(data){
                if(data.code === 200){
                    console.log(`${data.message}`);
                }else{
                    console.log(`${data.message}`);
                }
            },
            error:function(e){
                self.$message.warning(`${e}`);
                //console.log("不成功"+e);
            }
        });
        stream.getTracks()[0].stop();//结束关闭流
    })
  </script>
</body>
</html>
    评论

报告相同问题？

问题事件

  • 创建了问题 7月8日

悬赏问题

  • ¥15 如何在maya程序中利用python编写领子和褶裥的模型的方法
  • ¥15 Linux权限管理相关操作（求解答）
  • ¥15 Bug traq 数据包 大概什么价
  • ¥15 在anaconda上pytorch和paddle paddle下载报错
  • ¥25 自动填写QQ腾讯文档收集表
  • ¥15 DbVisualizer Pro 12.0.7 sql commander光标错位 显示位置与实际不符
  • ¥15 求一份STM32F10X的I2S外设库
  • ¥15 android 打包报错
  • ¥15 关于stm32的问题
  • ¥15 ncode振动疲劳分析中，noisefloor如何影响PSD函数？