Question

我正在尝试显示从网络摄像机拍摄的照片。但是尺寸不匹配。我不确定在哪个文件中定义大小。

左边是相机，右边是照片。我想使照片的尺寸与照相机的尺寸完全相同，但是我不知道它在哪里。因为我试图以各种可能的方式进行更改。这是我尝试执行的文件。

JavaScript文件：

document.addEventListener("DOMContentLoaded", function () {

    const video = document.getElementById('video-display');
    const canvas = document.getElementById('canvas-photo');
    const errorMsgElement = document.querySelector('span#errorMsg');
    const context = canvas.getContext('2d');
    const photo_button = document.getElementById('photo-button');

    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia ||
        navigator.msGetUserMedia || navigator.oGetUserMedia;

    if (navigator.getUserMedia) {
        navigator.getUserMedia({
            video: true,
            audio:false
        }, handleVideo, videoError);
    }

    function handleVideo(stream) {
        window.stream = stream;
        video.srcObject = stream;
        video.play();

    }

    function videoError(e) {
        alert("Something went wrong");
    }

    photo_button.addEventListener("click", function () {
        context.drawImage(video, 0, 0, 300, 150);
        context.imageSmoothingEnabled = true;
        let html = `
<button id="predict-button" type="submit" value="Rozpoznaj">Rozpoznaj</button>`;
        document.querySelector('#predict-button-div').innerHTML = html;
        const predict_button = document.getElementById('predict-button');
        let image = canvas.toDataURL('image/jpeg');
        let date = new Date().toLocaleString();
                predict_button.addEventListener("click", function () {
            $.ajax({
    url         : "/",
    method      : "post",
    contentType : 'application/json',
    dataType    : 'html',
    data        : JSON.stringify({ "imageData": canvas.toDataURL('image/jpeg'), "name" : date })
});
        })
    })
})

HTML文件：

<!DOCTYPE html>
<html>

<head>
    <title>Warzywaniak</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="static/js/camera.js?newversion"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <link rel="stylesheet" href="static/css/camera.css">
    <link rel="shortcut icon" href="{{url_for('static', filename = 'images/favicon.ico')}}">

</head>

<body>
    <div class="container-main">
        <div class="container-header">
            <header class="header">
                <a class="link-title" href="/">Zgadnij co to!</a>
            </header>
        </div>
        <div id="camera">
            <video id="video-display" autoplay="true">
                Nie ma możliwości zrobienia zdjęcia
            </video>
            <div id="photo-button-div">
                <button id="photo-button">Zrób zdjęcie</button>
            </div> 
        </div>
        <div id="photo">
             <canvas id="canvas-photo"></canvas>
            <div id="predict-button-div"></div>
        </div>

    </div>


</body>

</html>

CSS文件：

.header a {
    text-decoration: none;
    color: #FFFFFF;
    font-size: 3.5em;
    font-weight: bold;
    font-family: Apple Chancery, cursive;
}

.container-header {
    background-color: #4CAF50;
    height: 60px;
    width: auto;
    padding: 20px 20px 40px 20px;
    margin: 15px;
}

.container-main {
    margin: 15px;
}

#camera {
    width: 50%;

    height: auto;
    text-align: center;
    float:left;
}
#photo {
    width: 50%;
    margin:0 auto;
    height: auto;
    text-align: center;
    float:right;

}

#video-display{
    width:auto;
    height:auto;
}

#photo-button-div{
    margin:10px;
    width:100%;
}

 #photo-button {
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 150px;
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    border-radius: 8px;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#predict-button-div{
    margin:10px;
}

#photo {
    float: right;
    width: 45%;
    height: auto;
    margin: 15px;

}

#canvas-photo{
    width:88%;
    height: auto;
    margin: 0 auto;
}

#predict-button{
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 150px;
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    border-radius: 8px;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

我希望有人知道我可以在哪里调整照片的大小。

Answer 1

From the documentation:

尽管出于隐私原因无法访问有关用户的摄像头和麦克风的信息，但是应用程序可以使用其他约束来请求其所需和所需的摄像头和麦克风功能。 ...浏览器将尝试执行此操作，但是如果没有完全匹配的内容或用户将其覆盖，则可能返回其他分辨率。

本文还提到可能会请求特定的大小，但可能导致请求失败。我想，但是，一旦获得了视频，便可以根据视频的大小轻松地调整Canvas的大小。

如何调整画布的大小？

1 个答案: