How to save div as image on click?

632
January 12, 2017, at 10:37 PM

I would like to know how I can save my div into an image on click with an unique name.

I used to save the image on right-click but that no longer works and it's hard for the user to do.

I want to do something easier let's say that you clicked preview image and the image is previewed, which got an unique name that is automatically put in the image upload box.

I don't want it to download into my files and retrieve it and upload the image manually.

If you have further question please feel free to ask thank you.

$(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; 
      } 
    }); 
  }); 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="firstshirt" class="container" style="float:left;"> 
  <center> 
    <div id="wrapper"> 
      <div id="boxes" class="container5" style="float:center;"> 
        <div data-bind="foreach:items" class="fix_backround"> 
          <div class="item" data-bind="draggable:true,droppable:true"> 
            <center><span id="texter" class="text" data-bind="text:$data"></span> 
              <input class="edit_text" /> 
            </center> 
          </div> 
        </div> 
        <a href="" download><span id="image" class="preview-area"></span></a> 
      </div> 
    </div> 
  </center> 
  <br><br><br><br> 
</div> 
  
<input id="btn-Preview-Image" type="button" value="Preview" /> 
<p> 
  <label form="file">Upload Downloaded Image:</label> 
  <input type="file" name="file3" id="file3" required formvalidate> 
</p>

Answer 1

If I understand your question you want the user to be able to see the image before uploading. If so try using FileReader which doesn't required any thing but jQuery.

$("#images").change(function() { 
 
  // clear div (encase preview already exist) 
  $(".gallery").empty();  
   
  // get all the image 
  var images = $("#images").prop('files'); 
   
  // loop through the images and display with FileReader 
  $(images).each(function(e) { 
    var reader = new FileReader(); 
    reader.onload = function(e) { 
      var $img = $("<img/>").attr('src', e.target.result); // creates the image 
      $(".gallery").append($img); // adds the image to the div 
    }; 
    reader.readAsDataURL(this); // passes the file data to reader 
  }); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<p> 
  <label for="images">Image Upload:</label> 
  <input type="file" id="images" name="images" multiple> 
</p> 
<div class="gallery"></div>

Answer 2
$("#btnSave").click(function() { 
    html2canvas($("#firstshirt"), {
        onrendered: function(canvas) {
            theCanvas = canvas;
            document.body.appendChild(canvas);
            // Convert and download as image 
            Canvas2Image.saveAsPNG(canvas); 
            $("#previewImage").append(canvas);
        }
    });
});

check this fiddle : https://jsfiddle.net/8ypxW/3/

Rent Charter Buses Company
READ ALSO
Form autocomplete fields populating incorrectly

Form autocomplete fields populating incorrectly

I've created a form for a site that I'm developing as follows:

305
Hyperlink text ellipsis in fixed column width after .ajax

Hyperlink text ellipsis in fixed column width after .ajax

I try to create shortening url website (like bitly)I use ajax after users submit long original url to make short url appears promptly

412
jQuery - add css class to div outside of tinyMCE iframe?

jQuery - add css class to div outside of tinyMCE iframe?

I want to add a tool-tip to a tinyMCE editor when a user focuses into the editor and hide the tool tip on blurThe problem is tinyMCE injects an iframe but the div i want to add the css class to inorder to toggle the tool-tip resides outside of the tinyMCE...

530
Implementing Grid and Ruler for html css

Implementing Grid and Ruler for html css

I'm working with an image editor using JavaScriptIt has multiple layers of images similar to Photoshop

391