MakariosEngine/dataUriTesting.html at master · Bashmelek/MakariosEngine · 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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <title></title>
    <style>
        html {
            background-color: #111111;
        }

        body {
            background-color: #111111
        }

        a:hover {
            color: #44aacc;
        }
    </style>
</head>
<body style="background-color: #111111; background-image: url('dark_marble_smaller.jpg'); background-size: 60% 60%;" link="#339bbd" vlink="#339bbd" alink="#339bbd">
    <div style="height: 4px;"></div>
    <div id="centerdiv" style="width: calc(100vw - 72px); display: flex; justify-content: center; padding-left: 36px; margin-right: 36px;">
        <div id="canvasHolder" style="margin-left: auto; margin-right: auto;">
            <canvas id="glCanvas" style="position: absolute; background-color: black; " width="640" height="480"></canvas>
            <!--Thank you to https://stackoverflow.com/questions/6796194/canvas-getcontext2d-returns-null and https://stackoverflow.com/questions/10037649/how-can-i-stack-two-same-sized-canvas-on-top-of-each-other -->
            <canvas id="uiCanvas" style="position: relative;" width="640" height="480"></canvas>
        </div>
    </div>

    <div style="width: 90vw; display: flex; justify-content: center; padding-top: 18px; padding-bottom: 18px; font-family: sans-serif; font-size: 14pt;">
        <div style="margin-left: 10%; color: #efefff;">
        </div>
    </div>
    <div>
        <footer>
            <div style="border-top: 1px solid  #efefff; width: 80%; margin-left: auto; margin-right: auto; color: #efefff;">
            </div>
        </footer>
    </div>
</body>
</html>

<script type="text/javascript">
    (function () {
        //$("html,body").scrollTop(29);
        ////console.log('king kscrolled');
        //document.getElementById('glCanvas').scrollIntoView();
        ////setTimeout(function () {
        ////    window.scrollTo(0, 55);
        ////}, 10);

        const ui = document.querySelector('#uiCanvas');
        const gui = ui.getContext('2d');
        var imgData = gui.createImageData(64, 64);
        for (var i = 0; i < 4096; i++) {//data.length
            imgData.data[i * 4 + 0] = 255.0 * 0.65;//data[i][0];
            imgData.data[i * 4 + 1] = 255.0 * 1.0;//data[i][1];
            imgData.data[i * 4 + 2] = 255.0 * 1.0;//data[i][2];
            imgData.data[i * 4 + 3] = 255.0 * 1.0;//data[i][3];
        }
        gui.putImageData(imgData, 0, 0);

        var newData = gui.getImageData(0, 0, 64, 64);

        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        canvas.width = newData.width;
        canvas.height = newData.height;
        ctx.putImageData(newData, 0, 0);

        var image = new Image();
        image.src = canvas.toDataURL("image/png");
        document.body.appendChild(image);
        canvas.remove();
        //return image;


        //thank you Sameera Thilakasiri https://stackoverflow.com/questions/7915882/disabling-mouse-scrolling with a few edits
        setTimeout(function () {
            document.getElementById('uiCanvas').onmouseenter = function () {
                document.getElementsByTagName('body')[0].style.overflow = 'hidden';
                document.getElementById('centerdiv').style.marginRight = "2px";
                //document.getElementById('centerdiv').style.width = "calc(100% - 38px)";
            };
            document.getElementById('uiCanvas').onmouseleave = function () {
                document.getElementsByTagName('body')[0].style.overflow = 'auto';
                document.getElementById('centerdiv').style.marginRight = "36px";
                //document.getElementById('centerdiv').style.width = "calc(100% - 72px)";
            };
        }, 10);

    })();
</script>