Exam-IN/testing.php at master · Bumsquest/Exam-IN · 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
<?php
    include 'db/database.php';
    session_start();
?>
<!DOCTYPE html>
<html>
    <head>
        <?php include 'include/meta_include.php' ?>
        <meta charset="utf-8">
        <title>Testing</title>
        <?php include 'include/css_include.php' ?>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropper/3.1.4/cropper.min.css">

        <style media="screen">
            .img-box img{
                max-width: 100%;
                max-height: 600px;
            }
            .cropper-crop {
                background: none;
            }
            .cropper-bg {
                background: none;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="img-box">
                <img id="image" src="2.jpg">
                <button class="btn" name="button" onclick="crop()">Crop</button>
            </div>
        </div>
        <?php include 'include/js_include.php' ?>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/cropper/3.1.4/cropper.min.js"></script>
        <script>

            $("#image").cropper();
            function crop(){

                $("#image").cropper('getCroppedCanvas').toBlob(function (blob) {
                  var formData = new FormData();

                  formData.append('croppedImage', blob);

                  $.ajax('upload.php', {
                    method: "POST",
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function () {
                      console.log('Upload success');
                    },
                    error: function () {
                      console.log('Upload error');
                    }
                  });
                });
            }
        </script>
    </body>
</html>