如何右键单击画布以另存为图像而不是html？

Question

以下代码有效，但是如何添加按钮将画布另存为图像？

<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>

完整的代码示例可以在这里找到。 嗨，我正在尝试使用该示例，但是它没有说明如何将图像保存为图像而不是html。

Answer 1

第一

升级到KineticJS的新版本（新版本可以导出到图像）。

下一个

使用stage.toDataURL将舞台保存到图像并将该图像附加到页面，以便用户可以在图像上“右键单击另存为”以将其保存到本地驱动器：

示例代码和演示： 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;
    }
});

Answer 2

这也可以使用getCanvas方法与旧版KJS一起使用：

$("#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/