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

我在一个页面上有一个画布,该画布将由用户编辑(在其上绘制),并且我希望同一画布出现在他们访问的下一页中.例如,用户可以在第一页(floorplan.php)创建平面图,而在下一页(furnish.php)可以将家具拖放到画布上.

我已经检查了此解决方案,但是它似乎对我不起作用(https://stackoverflow.com/questions/4405336/how-to-copy-contents-of-one-canvas-to-another-本地画布)

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

解决方法:

您似乎期望在新页面上定义变量canvas.请记住,加载新页面时,上一页(以及该页面的javascript对象)基本上消失了.

您将需要序列化画布图像数据,并将其传递到URL(或其他位置)中,以便可以在新页面上重新构造它.参见this SO question about canvas serialization.

您可能还希望考虑使平面图应用程序的两个阶段在同一页面上工作,因此没有必要.

标签：html5,html5-canvas,javascript
来源： https://codeday.me/bug/20191202/2085177.html