PLAYCUBE PLAYCUBE - 1 year ago 103
Javascript Question

Getting an image or canvas out of the preview window

I am working with a cool tool called cropit. This is what I have already:

Now, by clicking on the "Export" button, I want to change the
operation and get the preview image as an alone standing image underneath all of that. In other words - I want to take a snapshot of it, and everytime I change the preview and click on the button, the snapshot changes too.

Any idea how to act on this one?

Answer Source

You can create an <img> element, set img element src to imageData, append newly created image to document

<!DOCTYPE html>

  <script class="jsbin" src=""></script>
  <script src="">
  <meta charset=utf-8 />
  <!--[if IE]>
  <script src=""></script>
    section {
      display: block;
    .cropit-preview {
      width: 360px;
      height: 360px;


  <!-- This wraps the whole cropper -->

  <div id="image-cropper">

    <!-- This is where the preview image is displayed -->
    <div class="cropit-preview"></div>

    <!-- This range input controls zoom -->
    <input type="range" class="cropit-image-zoom-input" />

    <!-- This is where user selects new image -->
    <input type="file" class="cropit-image-input" />

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

      $('.export').click(function() {
        var imageData = $('#image-cropper').cropit('export');
        $("<img>", {
          src: imageData



Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download