试图从一个页面复制画布到另一个

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。

您也可以考虑让您的平面布置图应用程序的两个阶段在同一页上工作，这样就没有必要了。