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>

可以找到完整的代码示例 here 。嗨，我试图使用这个例子，但它没有解释如何保存图像而不是html。

Answer 1

<强>第一

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

下一步

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

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

这也适用于旧版本的KJS，使用getCanvas方法：

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

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

2 个答案: