bpeterso2000
8/28/2016 - 9:54 PM

Uses croppie jquery-plugin. Upload a file, it allows you to pan & zoom with a circle in the center, then when you click save it crops the c

Uses croppie jquery-plugin. Upload a file, it allows you to pan & zoom with a circle in the center, then when you click save it crops the circle.

cropcircles.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Crop Circles</title>

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <script src="bower_components/jquery/dist/jquery.min.js"></script>
  <script src="bower_components/jquery.redirect/jquery.redirect.js"></script>

  <script src="bower_components/Croppie/croppie.min.js"></script>
  <link rel="stylesheet" href="bower_components/Croppie/croppie.css" />

  <script src="bower_components/boostrap/dist/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css" />
</head>

<body>
<div class="container">
  <div class="page-header">
    <h1>Upload Photo <small>Crop Circle</small></h1>
  </div>
  <div class="col-md-4 center-block">
    <div id="crop"></div>
      <form id="form">
        <div class="form-group">
          <label class="btn btn-default btn-file">
            Choose File <input type="file" id="upload" style="display: none;">
          </label>
          <button type="button" class="btn btn-primary" id="save">Save</button>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
  $(document).ready(function() {
    var crop = $('#crop').croppie({
            viewport: {
              width: 200,
              height: 200,
              type: 'circle'
            }
        });

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

        reader.onload = function (e) {
          crop.croppie('bind', { url: e.target.result });
        }

        reader.readAsDataURL(input.files[0]);
      }
    }

    $("#upload").change(function() {
      readURL(this);
    });

    $("#save").click(function() {
      crop.croppie('result', {
        'type': 'canvas',
        'size': {'height': 100, 'width': 100},
        'circle': true}).then(function(image) {
          $.redirect('http://localhost:8000/cropcircles', {
            'image': image
          });
      });
    });
  });
</script>

</body>
</html>