Created
October 15, 2020 15:41
-
-
Save spapas/1709a135811f6fe3759a4b703aee55e5 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
How can I save the cropped image to directory???