JSFiddle - React, Tailwind, and code Playground

by lemon kazi

HTML

<script src="https://bowercdn.net/c/cropit-0.5.1/dist/jquery.cropit.js"></script>
<div class="avatar-editor">
  <input type="file" class="cropit-image-input">
  <div class="cropit-preview"></div>
  <div class="image-size-label">
    Resize image
  </div>
  <input type="range" class="cropit-image-zoom-input">
  <input type="hidden" name="avatar" class="avatar"/>
  
  <button type="button" class="export">
    Crop
  </button>
</div>

CSS

.cropit-preview {
        background-color: #f8f8f8;
        background-size: cover;
        border: 1px solid #ccc;
        border-radius: 3px;
        margin-top: 7px;
    }

    .image-editor {
        overflow: hidden;
    }

    .cropit-preview-background {
        opacity: .2;
    }

    .cropit-preview-image-container {
        cursor: move;
    }

    .image-size-label {
        margin-top: 10px;
    }

JavaScript

$('.avatar-editor').cropit({width: 400, height: 225});

$('.export').click(function() {
  var imageData = $('.avatar-editor').cropit('export');
  window.open(imageData);
});