How to capture screentshot of Canvas

Question

I have a Canvas and multiple images of flower on it . actually i am doing an arrangement of flower into the vase and after the arrangement ,i want to capture the arrangement of flowers and vase as an image into the system. Actually i want to clip and save that portion of canvas where arrangement of flowers and vase is visualize

this one? http://stackoverflow.com/questions/923885/capture-html-canvas-as-gif-jpg-png-pdf — Surely, May 30 '15 at 07:24

score 0 · Answer 1 · edited Feb 15 '16 at 07:57

You will have to use html2canvas for this. The below function triggered on click of the button will take screenshot/capture the contents of the division as a image and will show a popup to save it

JAVASCRIPT

$(function () {
    $("#btnSave").click(function () {

        html2canvas($("#capture"), {
            onrendered: function (canvas) {
                theCanvas = canvas; 
                document.body.appendChild(canvas);//to verify if image is being captured or not
                canvas.toBlob(function (blob) {
                    saveAs(blob, "screenshot.png");
                });
            }
        });
    });
});

HTML

    <div id="capture" >
     <img src="images.jpg" />
    </div>
<br/>
<input type="button" id="btnSave" value="Save"/>

How to capture screentshot of Canvas

1 Answers1