Crop image

In this example below you will see how to do a Crop image with some HTML / CSS and Javascript

This awesome code was written by quanghuy1294, you can see more from this user in the personal repository.
You can find the original code on
Copyright quanghuy1294 ©
  • HTML
  • CSS
  • JavaScript
    <div class="form-group ">
  <label for="front_image">Front Image</label>
  <input class="form-control front_image" name="front_image" id="front_image" type="file">

<div class="modal fade" tabindex="-1" role="dialog" id="cropImage">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
        <h4 class="modal-title">Modal title</h4>
      <div class="modal-body">
        <div class="img-container">
          <img src="" id="cropDataImage" class="cropDataImage" alt="">
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary btn-crop">Save changes</button>

/*Downloaded from */
    .img-container {
            width: 100%;
        .img-container img {
            max-width: 100%;
            width: 100%;

/*Downloaded from */
    var cropper;
$(document).ready(function() {
  var images = $("#cropDataImage");
  var configs = {
    viewMode: 1,
    movable: false,
    zoomable: false,
    rotatable: false,
    scalable: false,

  cropper = images.cropper(configs);

  function readURL(input) {
    if (input.files && input.files[0]) {
      var reader = new FileReader();

      reader.onload = function(e) {


  $(".front_image").on("change", function(e) {
    var img = $(this);
    if (img[0].files.length) {