CODEWITHSUNDEEP
javascriptcanvasdrawingpage-refresh
branco holtslag
branco holtslag

Reputation: 279

I need to remember my canvas drawing on page refresh

I have a script that uploads files, input fields and a canvas drawing all in a folder. It works except that when I uploaded my canvas, it would upload it before the folder was created thuss putting it in nothing. I have fixed that by saying that it needs to upload after the form and all images are submitted.. however this causes the page to refresh and thuss resetting my canvas drawing (to a blank canvas). I need a way to remember my canvas drawing on page refresh. Here is my code:

<?php if ($savescript == 1) { ?>
<script type="text/javascript">
    $(document).ready(function() {
        var myDrawing = document.getElementById("simple_sketch");
        var drawingString = myDrawing.toDataURL("image/jpg");
        var postData = "canvasData="+drawingString;
        var ajax = new XMLHttpRequest();
        ajax.open("POST",'saveimage.php',true);
        ajax.setRequestHeader('Content-Type', 'canvas/upload');
        ajax.onreadystatechange=function()
            {
                if (ajax.readyState == 4)
                {alert("image saved");}
            }
            ajax.send(postData);
    });
</script>
<?php }; ?>

$savescript is based on a hidden input field that has the value of 1, so it'll only send after the form is submitted

** Insert standard HTML page code here **

Then here is my canvas wich is inside a form

<canvas id="simple_sketch" name="simple_sketch" width="800" height="300"></canvas>
    <script type="text/javascript">
      $(function() {
        $('#simple_sketch').sketch();
      });
    </script>

So how can I let the canvas remember what was drawn before the page reload?

NEED HALP :p

Upvotes: 0

Views: 886

Answers (1)

rhettro
rhettro

Reputation: 46

Does the page need to refresh? If you're already making ajax calls it might be easier to use preventDefault to stop the refresh and let the rest of the code execute. You will then be able to keep the reference to your canvas object.

Upvotes: 2

Related Questions