PLAYCUBE PLAYCUBE - 4 months ago 21
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:

http://code.reloado.com/ejiyov3

Now, by clicking on the "Export" button, I want to change the

window.open(imageData)
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

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

<!DOCTYPE html>
<html>

<head>
  <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/jquery.cropit/0.5.1/jquery.cropit.js">
  </script>
  <meta charset=utf-8 />
  <title>code.reloado.com</title>
  <!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
  <style>
    article,
    aside,
    figure,
    footer,
    header,
    hgroup,
    menu,
    nav,
    section {
      display: block;
    }
    .cropit-preview {
      width: 360px;
      height: 360px;
    }
  </style>
</head>

<body>

  <!-- 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>

    <script>
      $("#image-cropper").cropit();
      $('.export').click(function() {
        var imageData = $('#image-cropper').cropit('export');
        console.log(imageData);
        $("<img>", {
          src: imageData
        }).appendTo("body")
      });
    </script>

  </div>
</body>

</html>