save div as image when clicked next
<p>how can i save div as image when user clicks next i have the code that allows the user to preview the div as image and then the user has to manually save the image by right clicking and then uploading it as an image. what i really want is for the div to save to a folder in my Db and save the name to my db table.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
  var element = $("#firstshirt"); // global variable
  var getCanvas; // global variable
  $("#btn-Preview-Image").on('click', function() {
    html2canvas(element, {
      allowTaint: true,
      logging: true,
      onrendered: function(canvas) {
        $("#previewImage").append(canvas);
        getCanvas = canvas;
      }
    });
  });
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input id="btn-Preview-Image" type="button" value="Preview" /&gt;</code></pre>
</div>
</div>
</p>