resize/resize.html at master · jeyoung/resize · 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
<!DOCTYPE html>
<html lang="en-gb">
    <head>
        <meta charset="utf-8">
        <title>Square-A-Picture</title>
        <style>
        body
        {
            font-family: verdana;
        }
        </style>
    </head>
    <body>
        <h2>Square-A-Picture</h2>
        <div id="introduction">
            <p>This tool resizes an image into a square (1:1 ratio) format.</p>
            <p>Simply select your image file and click <strong>GO</strong>. The resized image will be shown on the page.</p>
        </div>
        <div id="input">
            <form>
                <label><strong>Select your original image:</strong></label>
                <input type="file" id="fileSelection" />
                <br/>
                <input type="button" id="buttonGo" value="GO" />
            </form>
        </div>
        <br/>
        <br/>
        <div id="output">
            <div id="divResizedImageContainer"></div>
        </div>
    </body>
    <script type="text/javascript" src="resize.js"></script>
    <script type="text/javascript">
    window.onload = function (evt) {
        var view = {
            getImageFile: function () {
                                  return document.querySelector("#fileSelection").files[0];
                              },
            showOriginalImage: function (image) {
                                   var div = document.querySelector("#divOriginalImageContainer");
                                   div.innerHTML = "";
                                   div.appendChild(image);
                               },
            showResizedImage: function (image) {
                                   var div = document.querySelector("#divResizedImageContainer");
                                   div.innerHTML = "";
                                   div.appendChild(image);
                              },
            show: function () {
                      document.querySelector("#fileSelection").value = "";
                  }

        };
        var resizerController = new ResizeJS.ResizerController(view, new ResizeJS.ResizerService());
        document.querySelector("#buttonGo").onclick = function (evt) {
            resizerController.go();
        };
        resizerController.initialise();
    };
    </script>
</html>