javascript - 如何调整画布的大小？

问题描述

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

左边是相机，右边是照片。我想把照片做成和相机一样大小，但不知道在哪里。因为我尝试以各种可能的方式改变它。这是我尝试做的文件。

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);
}

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

标签： javascripthtmlcss

javascript - 如何调整画布的大小？

问题描述

解决方案

推荐阅读