Попытка скопировать холст с одной страницы на другую

Question

У меня есть холст на одной странице, который будет отредактирован пользователем (нарисован), и я хочу, чтобы тот же холст появился на следующей странице, которую он посетил. Например, на первой странице (floorplan.php) пользователь может создать план этажа, а на следующей странице (furnish.php) можно перетаскивать мебель на холст.

Я уже проверил это решение, но, похоже, оно не работает для меня (/2386839/kak-skopirovat-soderzhimoe-odnogo-holsta-na-drugoi-holst-lokalno)

Вот мой JS-код от furnish.php: (мой оригинальный холст, который я хочу скопировать, называется просто «холст»). Кроме того - у меня не было функции сохранения в моем коде 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 (или куда-нибудь), чтобы их можно было восстановить на новой странице. См. этот ТАК вопрос о сериализации canvas .

Вы также можете рассмотреть возможность работы двух фаз приложения вашего плана этажа на одной странице, так что в этом нет необходимости.