javascript - 尝试将 Canvas 从一页复制到另一页

Question

我在一个页面上有一个 Canvas ，将由用户编辑(在其上绘制)，我希望同一个 Canvas 出现在他们访问的下一个页面中。例如，第一页 (floorplan.php) 是用户可以创建平面图的页面，下一页 (furnish.php) 是用户可以在 Canvas 上拖放家具的地方。

我已经检查过这个解决方案，但它似乎对我不起作用 (http://stackoverflow.com/questions/4405336/how-to-copy-contents-of-one-canvas-to -另一个 Canvas -本地)

这是我来自 furnish.php 的 JS 代码:(我想要复制的原始 Canvas 称为“ 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 对象)基本上消失了。

您将需要序列化 Canvas 图像数据，并在 URL(或某处)中传递它，以便它可以在新页面上重新构造。参见 this SO question about canvas serialization .

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