试图将画布从一页复制到另一页答案

【问题标题】：Trying to Copy Canvas from One Page to Another试图将画布从一页复制到另一页
【发布时间】：2011-12-05 21:10:40
【问题描述】：

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

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

这是来自 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>

【问题讨论】：

标签： javascript html html5-canvas

【解决方案1】：

您似乎希望在新页面上定义变量canvas。请记住，当加载新页面时，前一页面（以及该页面的 javascript 对象）基本上都消失了。

您需要序列化画布图像数据，并在 URL（或某处）中传递它，以便在新页面上重新构建它。见this SO question about canvas serialization。

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

【讨论】：