Predator/calorie_measurer.html at master · Hack-Rx/Predator · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
  <html>
    <head>
        <meta charset='utf-8'>
        <script type="text/javascript" src='webcam.js'></script>
        <link rel='stylesheet' href='calstyle.css'>
    </head>

    <body>
        <div>
            <h1>Upload an image of the food to measure the calorie content</h1>
        </div>

        <div id="camera" style="height:auto;width:auto; text-align:left;"></div>

        <!--FOR THE SNAPSHOT-->
        <input id='b1' type="button" value="Take Snapshot" id="btPic" onclick="takeSnapShot()" />

        <p id="snapShot"></p>
        <img  class='ss'src='' title='captured image' width=150>
        <div >
            <input id='b2' type='file' name='filetoUpload'>

        </div>
        <img class='manUp' src=''>


    </body>

    <script>
        // CAMERA SETTINGS.
        Webcam.set({
            width: 220,
            height: 190,
            image_format: 'jpeg',
            jpeg_quality: 100
        });
        Webcam.attach('#camera');

        // SHOW THE SNAPSHOT.
        takeSnapShot = function () {
            Webcam.snap(function (data_uri) {

                document.querySelector('.ss').setAttribute('src',data_uri);


            });
        }

        let up = document.querySelector('.manUp');
        up.setAttribute('src',document.querySelector('.manual_upload').value);
        console.log(document.querySelector('.manual_upload').value);

    </script>

  </html>