Блог

Главная - Вопросы по программированию - Как загрузить изображение (снятое с помощью веб-камеры в веб-приложении) в базу данных SQLite, используя Javascript и Nodejs?

Как загрузить изображение (снятое с помощью веб-камеры в веб-приложении) в базу данных SQLite, используя Javascript и Nodejs?

#javascript #html #node.js #sqlite #file-upload

#javascript #HTML #node.js #sqlite #загрузка файла

Вопрос:

Итак, я собираю изображение пользователя с html-страницы с помощью webcamjs, и я хочу сохранить данные этого изображения в базе данных SQLite, используя Javascript. Также я запускаю это на сервере localhost: 3000 (nodejs rest API), на который эта страница должна отправлять данные изображения в виде POST-запроса.

Это код HTML-страницы:

 <html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>How to capture picture from webcam with Webcam.js</title>
</head>
<body>
    <!-- CSS -->
    <style>
    #my_camera{
        width: 320px;
        height: 240px;
        border: 1px solid black;
    }
    </style>
    <form action="http://localhost:3000/signupdetail" method="POST">
    
    <div id="my_camera"></div>
    <input type="button" value="Take Snapshot" onClick="take_snapshot()" name="faceimg">
    
    <div id="results"></div>

    <!-- Webcam.min.js -->
    <script type="text/javascript" src="../js/webcam.min.js"></script>

    <!-- Configure a few settings and attach camera -->
    <script language="JavaScript">
        Webcam.set({
            width: 320,
            height: 240,
            image_format: 'jpeg',
            jpeg_quality: 90
        });
        Webcam.attach( '#my_camera' );
    </script>
    
    <!-- Code to handle taking the snapshot and displaying it locally -->
    <script language="JavaScript">

        function take_snapshot() {
            
            // take snapshot and get image data
            Webcam.snap( function(data_uri) {
                // display results in page
                document.getElementById('results').innerHTML =
                    '<img src="' data_uri '" id = "faces" />';
            } );
        }
    </script>
    </form>
</body>
</html>

Комментарии:

1. Используйте ajax для отправки data_uri на сервер с использованием интерфейса fetch()

2. Простой способ: сохраните изображение на сервере и сохраните ссылку на изображение в sqlite, извлеките и покажите изображение по URL. Если вы хотите сохранить изображение в базе данных sqlite, вам нужно будет преобразовать изображение в массив байтов и сохранить указанный массив в базе данных. Для извлечения изображения вам придется преобразовать массив байтов в растровое изображение.

3. На самом деле проблема не в сохранении, поскольку я не дошел до стадии сохранения, я застрял при передаче данных изображения из браузера на сервер nodejs

4. Я не знаю, как использовать ajax, поэтому, если кто-нибудь может уточнить, пожалуйста