cropperJS/index.html at master · arshtepe/cropperJS · 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
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            margin: 100px;
        }
    </style>
    <script src="dist/cropperJS.js" > </script>
    <script>

        var cropper = new CropperJS( );
    </script>
</head>
<body>

<input type="file" id="file" >
<input type="button" value="get crop" id="cropButton" />
<input type="button" value="destroy" id="destroyBt" >

<script>


    document.body.appendChild( cropper.getCropperElement() );


    var file = document.getElementById( "file"),
        dButton = document.getElementById( "destroyBt"),
        cButton = document.getElementById( "cropButton" );

    cButton.onclick = function () {

        var img = cropper.getSelectImage();
        if (img)
        document.body.appendChild( img );
    };

    dButton.onclick = function () {
        cropper.destroy();
//        cropper = null;
    }


    file.addEventListener( "change", function ( e ) {

        var reader = new FileReader ();

        reader.onload = function () {
            var img = new Image();
            img.src = reader.result;
            cropper.setImg( img );
        };

        reader.readAsDataURL( e.target.files [0] );

    } );


</script>
<h1>test</h1>
</body>
</html>