GreenScreen/jsTutorial.html at master · yellow-fellow/GreenScreen · 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
57
58
59
<!DOCTYPE html>
<head>
    <title>jsTutorial</title>
    <link rel='stylesheet' href='./jsTutorial.css' />
    <link rel="shortcut icon" href="../HTML_test/test_project/Doge-Meme-of-the-Decade.jpg" />
    <script type="text/javascript" src="./jsTutorial.js"></script>
    <script src='http://www.dukelearntoprogram.com/course1/common/js/image/SimpleImage.js'></script>
    <style>
    canvas {
        border:1px solid rgb(176, 106, 255);
        background-color: rgb(255, 254, 219);
        color:rgb(255, 255, 196);
      }
    </style>
</head>
<body>
    <div class='container-fluid' align='center'>
        <h1>Green Screen Web Page</h1>
        <div class='container col-12'>
            <canvas id='d1'></canvas> <canvas id='d2'></canvas>
        </div>
        <h3>UPLOAD FILES</h3>
        <div class='container col-12'>
            Foreground: <input type='file' multiple='false' accept='image/*' id='fginput' onchange='upload1()'>
        </div>
        <br>
        <div class='container col-12'>
            Background: <input type='file' multiple='false' accept='image/*' id='bginput' onchange='upload2()'>
        </div>
        <br>
        <hr>
        <h3>COLOUR FILTERS</h3>
        <div class='container col-12'>
            <input type='button' value='MAKE GRAY 1' onclick='gray1()'>
            <input type='button' value='MAKE RED 1' onclick='red1()'>
            <input type='button' value='MAKE RAINBOW 1' onclick='rainbow1()'>
            <input type='button' value='MAKE BLUR 1' onclick='blur1()'>
        </div>
        <br>
        <div class='container col-12'>
            <input type='button' value='MAKE GRAY 2' onclick='gray2()'>
            <input type='button' value='MAKE RED 2' onclick='red2()'>
            <input type='button' value='MAKE BLUR 2' onclick='blur2()'>
        </div>
        <br>
        <hr>
        <div>
            <input type='button' value='MERGE' id='merge' onclick='greenscreen()'>
        </div>
        <br>
        <div>
            <input type='button' value='RESET' id='merge' onclick='reset()'>
        </div>
        <br>
        <div>
            <input type='button' value='CLEAR' id='clear' onclick='clearCanvas()'>
        </div>
    </div>
</body>