title: How to save using Javascript Image cropper "Croppie"
body: <p>Croppie uses a DIV container and not a CANVAS to do its cropping. I am trying to find out how to save the resulting cropped image from this DIV to a directory on the Server, such as via a SAVE button.</p>
  
  <p>Here is my HTML code ...</p>
  
  <pre><code>&lt;!-- begin snippet: js hide: false --&gt;
  
  &lt;!-- language: lang-html --&gt;
  
      &lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Demo Croppie&lt;/title&gt;
          &lt;link rel="Stylesheet" type="text/css" href="css/croppie.css" /&gt;
          &lt;link rel="Stylesheet" type="text/css" href="css/sweetalert.css" /&gt;
  
      &lt;/head&gt;
      &lt;body&gt;
  
          &lt;div id="testCanvas"&gt;&lt;/div&gt;
          &lt;div class="actions" style="margin-left: auto; margin-right: auto; width:250px;"&gt;
              &lt;button class="vanilla-result"&gt;Result&lt;/button&gt;
              &lt;button class="vanilla-rotate" data-deg="-90"&gt;Rotate Left&lt;/button&gt;
              &lt;button class="vanilla-rotate" data-deg="90"&gt;Rotate Right&lt;/button&gt;
          &lt;/div&gt;
  
      &lt;p&gt;&lt;button onclick="function();"&gt;Save&lt;/button&gt;&lt;/p&gt;
  
  
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/croppie.js"&gt;&lt;/script&gt;
      &lt;script src="js/demo.js"&gt;&lt;/script&gt;
      &lt;script src="js/sweetalert.min.js"&gt;&lt;/script&gt;
          &lt;script&gt;
            Demo.init();
          &lt;/script&gt;
  
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>Here is my JavaScript configurations ...</p>
  
  <pre><code>function demoVanilla() {
      var vanilla = new Croppie(document.getElementById('testCanvas'), {
          viewport: { width: 300, height: 300, type: 'square' },
          boundary: { width: 350, height: 350 },
          enableOrientation: true
      });
      vanilla.bind({
          url: 'imgs/demo-1.jpg',
          orientation: 1
      });
  
      document.querySelector('.vanilla-result').addEventListener('click', function (ev) {
          vanilla.result('canvas').then(function (src) {
              popupResult({
                  src: src
              });
          });
      });
  
      $('.vanilla-rotate').on('click', function(ev) {
          vanilla.rotate(parseInt($(this).data('deg')));
      });
  }
  </code></pre>
  
  <p>The rest comes by default without changes from Croppie at <a href="https://github.com/Foliotek/Croppie" rel="noreferrer">https://github.com/Foliotek/Croppie</a> such as demo.js, etc.</p>