Cropit get image src

Question

I am using cropit and I want to preview the cropped image in a modal. How do I get the src url of the cropped image

I copied the some parts of the basic html code for this plugin

HTML

    <div class="image-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">
      <button class="rotate-ccw">Rotate counterclockwise</button>
      <button class="rotate-cw">Rotate clockwise</button>

      <button class="export">Export</button>
    </div>

JS

      $(function() {
        $('.image-editor').cropit({
          imageState: {
            src: 'http://lorempixel.com/500/400/',
          },
        });

        $('.rotate-cw').click(function() {
          $('.image-editor').cropit('rotateCW');
        });
        $('.rotate-ccw').click(function() {
          $('.image-editor').cropit('rotateCCW');
        });

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

What I tried so far was using from the documentation

$('.image-editor').cropit('imageSrc'); //but it returns null. Is there any other way to do this?

the demo and the documentation doesnt seem to blend so Im having a hard time using the plugin.

score 0 · Answer 1 · answered Aug 20 '18 at 09:48

Just change this part. The imagedata is a usable base64 URL itself. It can't be open in a new window but you can easily set it as any image's src.

$('.export').click(function() {
      var imageData = $('.image-editor').cropit('export');
       $("#image").src = imageData;
    });

Working Example

$(function() {
  $('.image-editor').cropit({
    exportZoom: 1.25,
    imageBackground: true,
    imageBackgroundBorderWidth: 50,
     
  });

  $('.export').click(function() {
    var imageData = $('.image-editor').cropit('export');
 document.querySelector("#image").src = imageData;   
  });
});

.image-editor {
   text-align: center;
}

.cropit-preview {
  background-color: #f8f8f8;
  background-size: cover;
  border: 5px solid #ccc;
  border-radius: 3px;
  margin-top: 7px;
  width: 250px;
  height: 250px;
   display: inline-block;
}

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

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

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

input, .export {
  /* Use relative position to prevent from being covered by image background */
  position: relative;
  z-index: 10;
  display: block;
}

button {
  margin-top: 10px;
}

<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropit/0.5.1/jquery.cropit.js"></script>
<div class="image-editor">
   <input type="file" class="cropit-image-input">
   <div class="cropit-preview"></div>
   <input type="range" class="cropit-image-zoom-input">
   <button class="export">Export</button>
 </div>
<img id="image"/>

Cropit get image src

1 Answers1