CODEWITHSUNDEEP
kineticjs
user3552718
user3552718

Reputation: 25

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

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.

Upvotes: 0

Views: 169

Answers (2)

FitzFish
FitzFish

Reputation: 8629

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/

Upvotes: 0

markE
markE

Reputation: 105015

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;
    }
});

Upvotes: 1

Related Questions