如何右鍵單擊畫布以保存爲圖像而不是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> 

甲全碼的例子可以發現here。 嗨，我試圖使用該示例，但它不解釋如何保存是作爲一個圖像，而不是一個HTML。

Answer 1

這也與舊版本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/

Answer 2

首先

升級到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; 
    } 
});