How to save div as image on click?

Question

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/