seam_carving/index.php at master · 4lexvav/seam_carving · 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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<?php
set_time_limit(0);
ini_set('max_execution_time', 0);

if (isset($_FILES['image']['tmp_name'], $_POST['size'])) {
    require_once './vendor/autoload.php';

    // save image
    $imageName = addslashes($_FILES['image']['name']);
    $targetDir = 'web/';
    $targetFile = $targetDir . basename($imageName);
    $uploadOk = 1;
    $imageFileType = strtolower(pathinfo($targetFile, PATHINFO_EXTENSION));

    // Check file size
    if ($_FILES['image']['size'] > 500000) {
        echo 'Sorry, your file is too large.';
        exit();
    }

    // Allow certain file formats
    if($imageFileType != 'jpg' && $imageFileType != 'png' && $imageFileType != 'jpeg' && $imageFileType != 'gif' ) {
        echo 'Sorry, only JPG, JPEG, PNG & GIF files are allowed.';
        exit();
    }

    //move_uploaded_file($_FILES['image']['tmp_name'], $targetFile);
    file_put_contents($targetFile, file_get_contents($_FILES['image']['tmp_name']));

    // prepare size
    $size = explode('x', strtolower(htmlspecialchars(strip_tags($_POST['size']))));
    $x = $size[0] ?? 0;
    $y = $size[1] ?? 0;

    // prepare file names
    $targetFile = str_replace('.'.$imageFileType, '', $targetFile);
    $baseImgFile = $targetFile . '.' . $imageFileType;
    $dualImgFile = $targetFile . '_dual.' . $imageFileType;
    $baseImgWithSeamsFile = $targetFile . '_seams.' . $imageFileType;
    $resizedImgFile = $targetFile . '_resized.' . $imageFileType;

    // resize image
    $picture = new Picture($baseImgFile);
    $seamCarver = new SeamCarver($picture);

    $seamCarver->outputDualGradientPicture($dualImgFile);

    # collect and remove seams
    $hSeams = [];
    $vSeams = [];
    for ($i = 0; $i < $x; $i++) {
        $vSeams[] = $seamCarver->findVerticalSeam();
        $seamCarver->removeVerticalSeam($vSeams[$i]);
    }

    for ($i = 0; $i < $y; $i++) {
        $hSeams[] = $seamCarver->findHorizontalSeam();
        $seamCarver->removeHorizontalSeam($hSeams[$i]);
    }

    // output images with removed seams
    $picture->output($resizedImgFile);
    $picture->outputWithSeams($hSeams, $vSeams, $baseImgWithSeamsFile);
}
?>

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Seam Carving</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>

<main role="main">

    <section class="jumbotron text-center">
        <div class="container">
            <h1 class="jumbotron-heading">Seam Carving</h1>
            <p class="lead text-muted">Content-aware image resizing techinque.</p>
        </div>
    </section>

    <div class="container mb-5">
        <div class="row justify-content-md-center">
            <div class="col-md-4">
                <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="POST" enctype="multipart/form-data">
                    <div class="form-group">
                        <label for="image">Image</label>
                        <input type="file" name="image" class="form-control-file" id="image" aria-describedby="imageHelp" placeholder="Upload image">
                        <small id="imageHelp" class="form-text text-muted">Please upload image you want to resize.</small>
                    </div>
                    <div class="form-group">
                        <label for="size">Reduce by number of pixels</label>
                        <input type="text" name="size" class="form-control" id="size" placeholder="WxH">
                    </div>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </form>
            </div>
        </div>
    </div>

    <?php if (isset($baseImgFile)): ?>
        <div class="album py-5 bg-light">
            <div class="container">

                <div class="row mb-5">
                    <img class="img-fluid mx-auto" alt="Responsive image" src="<?= $baseImgFile ?>">
                    <img class="img-fluid mx-auto" alt="Responsive image" src="<?= $dualImgFile ?>">
                    <!--<canvas id="base_image"></canvas>-->
                </div>
                <div class="row mb-5">
                    <img class="img-fluid mx-auto" alt="Responsive image" src="<?= $baseImgWithSeamsFile ?>">
                    <img style="height:100%" class="img-fluid mx-auto" alt="Responsive image" src="<?= $resizedImgFile ?>">
                </div>
            </div>
        </div>

        <!--<script type="text/javascript">
        //    var canvas = document.getElementById('base_image');
        //    var ctx = canvas.getContext('2d');
        //
        //    ctx.fillStyle = '#FF0000';
        //    canvas.style['background-image'] = 'url("<?/*//= $baseImgFile */?>//")';
        //    canvas.style['background-size'] = '100%';
        //    canvas.style.width = '50%';
        //    canvas.style.height = '50%';
        //
        //    /*base_image = new Image();
        //    base_image.src = "<?/*//= $baseImgFile */?>//";
        //    base_image.onload = function() {
        //        ctx.drawImage(base_image, 0, 0);
        //    }*/
        //
        //    vSeams = <?/*//= json_encode($vSeams) */?>//;
        //    hSeams = <?/*//= json_encode($hSeams) */?>//;
        //
        //    vSeams.forEach(seam => {
        //        for (let [y, x] of Object.entries(seam)) {
        //            ctx.fillRect(x, y, 1, 1);
        //        }
        //    });
        //
        //    hSeams.forEach(seam => {
        //        for (let [x, y] of Object.entries(seam)) {
        //            ctx.fillRect(x, y, 1, 1);
        //        }
        //    });
        //</script>-->
    <?php endif ?>

</main>

<footer class="text-muted">
    <div class="container">
        <p class="float-right">
            <a href="#">Back to top</a>
        </p>
    </div>
</footer>

</html>