Question

我在一个页面上有一个画布，将由用户编辑（绘制），我希望在他们访问的下一页中显示相同的画布。例如，第一页（floorplan.php）是用户可以创建楼层平面图的地方，下一页（furnish.php）是他们可以在画布上拖放家具的地方。

我已经检查了这个解决方案，但它似乎对我不起作用（http://stackoverflow.com/questions/4405336/how-to-copy-contents-of-one-canvas-to -another-帆布局部地）

这是我来自furnish.php的JS代码:(我想要复制的原始画布叫做'canvas'）。另外 - 我的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。

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

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

1 个答案: