spapas/cropper.html

## cropper.html
<html>

<head>

    <link href="https://cdn.paperindex.com/bootstrap/css/font-awesome.min.css" rel="stylesheet">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.4/cropper.min.css">
    <style>

    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.9/cropper.min.js" integrity="sha512-9pGiHYK23sqK5Zm0oF45sNBAX/JqbZEP7bSDHyt+nT3GddF+VFIcYNqREt0GDpmFVZI3LZ17Zu9nMMc9iktkCw==" crossorigin="anonymous"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
    <div class='row'>
        <div class='col-md-4'>
            <input id="file-input" type="file" accept="image/*" />
            <div class="box-2">
                <div class="result"></div>
            </div>
        </div>
        <div class='col-md-4'>
            <div class="box-2 img-result hide">
                <!-- result of crop -->
                <img class="cropped" src="" alt="">
            </div>

        </div>
    </div>
    <!-- input file -->
    <div class="box">
        <div class="options hide">
            <input type="hidden" class="img-w" value="200" min="200" max="1200" />
        </div>
        <!-- save btn -->
    </div>
    </div>
    <button class="btn save hide">Save</button>
    </div>
    <script>
        "use strict";

        // vars
        var result = document.querySelector(".result"),
            img_result = document.querySelector(".img-result"),
            img_w = document.querySelector(".img-w"),
            img_h = document.querySelector(".img-h"),
            options = document.querySelector(".options"),
            save = document.querySelector(".save"),
            upload = document.querySelector("#file-input"),
            cropper = "";
        // on change show image with crop options
        upload.addEventListener("change", function(e) {
            if (e.target.files.length) {
                // start file reader
                var reader = new FileReader();
                reader.onload = function(e) {
                    if (e.target.result) {
                        // create new image
                        var img = document.createElement("img");
                        img.id = "image";
                        img.width = 400;
                        img.src = e.target.result;
                        // clean result before
                        result.innerHTML = "";
                        // append new image
                        result.appendChild(img);
                        // show save btn and options
                        save.classList.remove("hide");
                        options.classList.remove("hide");
                        // init cropper
                        cropper = new Cropper(img);
                    }
                };
                reader.readAsDataURL(e.target.files[0]);
            }
        });
        // save on click
        save.addEventListener("click", function(e) {
            var cropped = document.querySelector(".cropped");

            e.preventDefault();
            // get result to data uri
            var imgSrc = cropper.getCroppedCanvas({
                width: img_w.value // input value
            }).toDataURL();
            // remove hide class of img
            cropped.classList.remove("hide");
            img_result.classList.remove("hide");
            // show image cropped
            cropped.src = imgSrc;


        });
    </script>
</body>

</html>
	<html>

	<head>

	<link href="https://cdn.paperindex.com/bootstrap/css/font-awesome.min.css" rel="stylesheet">

	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.4/cropper.min.css">
	<style>

	</style>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.9/cropper.min.js" integrity="sha512-9pGiHYK23sqK5Zm0oF45sNBAX/JqbZEP7bSDHyt+nT3GddF+VFIcYNqREt0GDpmFVZI3LZ17Zu9nMMc9iktkCw==" crossorigin="anonymous"></script>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	</head>

	<body>
	<div class='row'>
	<div class='col-md-4'>
	<input id="file-input" type="file" accept="image/*" />
	<div class="box-2">
	<div class="result"></div>
	</div>
	</div>
	<div class='col-md-4'>
	<div class="box-2 img-result hide">
	<!-- result of crop -->
	<img class="cropped" src="" alt="">
	</div>

	</div>
	</div>
	<!-- input file -->
	<div class="box">
	<div class="options hide">
	<input type="hidden" class="img-w" value="200" min="200" max="1200" />
	</div>
	<!-- save btn -->
	</div>
	</div>
	<button class="btn save hide">Save</button>
	</div>
	<script>
	"use strict";

	// vars
	var result = document.querySelector(".result"),
	img_result = document.querySelector(".img-result"),
	img_w = document.querySelector(".img-w"),
	img_h = document.querySelector(".img-h"),
	options = document.querySelector(".options"),
	save = document.querySelector(".save"),
	upload = document.querySelector("#file-input"),
	cropper = "";
	// on change show image with crop options
	upload.addEventListener("change", function(e) {
	if (e.target.files.length) {
	// start file reader
	var reader = new FileReader();
	reader.onload = function(e) {
	if (e.target.result) {
	// create new image
	var img = document.createElement("img");
	img.id = "image";
	img.width = 400;
	img.src = e.target.result;
	// clean result before
	result.innerHTML = "";
	// append new image
	result.appendChild(img);
	// show save btn and options
	save.classList.remove("hide");
	options.classList.remove("hide");
	// init cropper
	cropper = new Cropper(img);
	}
	};
	reader.readAsDataURL(e.target.files[0]);
	}
	});
	// save on click
	save.addEventListener("click", function(e) {
	var cropped = document.querySelector(".cropped");

	e.preventDefault();
	// get result to data uri
	var imgSrc = cropper.getCroppedCanvas({
	width: img_w.value // input value
	}).toDataURL();
	// remove hide class of img
	cropped.classList.remove("hide");
	img_result.classList.remove("hide");
	// show image cropped
	cropped.src = imgSrc;


	});
	</script>
	</body>

	</html>