試圖從一個頁面複製畫布到另一個

Question

我在一個頁面上有一個畫布，用戶將對其進行編輯（繪製），並且我希望同一個畫布出現在他們訪問的下一個頁面中。例如，第一頁（floorplan.php）是用戶可以創建平面圖的位置，下一頁（furnish.php）是他們可以在畫布上拖放傢俱的位置。

我已經簽出這個解決方案，但它似乎並沒有爲我工作（http://stackoverflow.com/questions/4405336/how-to-copy-contents-of-one-canvas-到另一個畫布本地）

這是我的來自furnish.php的JS代碼:(我想複製的原始畫布被稱爲'畫布'）。另外 - 我沒有在我的floorplan.php代碼保存功能 - 也許這是問題？

<script>  
window.onload = function(){ 
    var canvas2 = document.getElementById('canvas2'); 
    var context2 = canvas.getContext("2d"); 

     var destX = 0; 
     var destY = 0; 

     var imageObj = new Image(); 
     imageObj.onload = function(){ 
      context.drawImage(canvas, destX, destY); 
     }; 
     imageObj.src = "images/grid.png"; 
    }; 

$(document).ready(function() 
{    

    $('#clear').click(function() 
    { 
     context.clearRect(0, 0, 700, 700); 
    });   

}); 
</script> 

Answer 1

您似乎期望在新頁面上定義變量canvas。請記住，當加載新頁面時，前一頁（以及該頁面的JavaScript對象）基本上沒有了。

您需要序列化畫布圖像數據，並將其傳遞到URL（或某處），以便在新頁面上重新構圖。見this SO question about canvas serialization。

您也可以考慮讓您的平面佈置圖應用程序的兩個階段在同一頁上工作，這樣就沒有必要了。