How can I right-click canvas to save as image instead of html?

Question

The following code is working but how can I add a button to save the canvas as an image?

<input id="newtext" type="text" value="Hello!">
<button id="addbutton">Any this text</button>
<h2>The added text is draggable</h2>
<div id="container"></div>

A full code example can be found here. Hi, I'm trying to use that example, but it doesn't explain how to save is as an image instead of a html.

Answer 1

This is also working with older version of KJS, using the getCanvas method :

$("#save").click(function () {
         var dataUrl = layer.getCanvas().toDataURL();
         var img = new Image();
         img.onload = function () {
                $("body").append("<p>Right-click the image below & then 'save-as'</p>");
                document.body.appendChild(img);
            }
            img.src = dataUrl;
            //window.open(dataUrl);
});

http://jsfiddle.net/7SERH/

Answer 2

First

Upgrade to the new version of KineticJS (the newer versions can export to images).

Next

Use stage.toDataURL to save the stage to an image and append that image to the page so the user can "right-click-save-as" on the image to save it to their local drive:

Example code and a Demo: http://jsfiddle.net/m1erickson/aFn57/

stage.toDataURL({
    callback: function(dataUrl) {
        var img=new Image();
        img.onload=function(){
            $("body").append("<p>Right-click the image below & then 'save-as'</p>");
            document.body.appendChild(img);
        }
        img.src=dataUrl;
    }
});