javascript - 我需要在页面刷新时记住我的 Canvas 绘图

Question

我有一个脚本，可以将文件、输入字段和 Canvas 绘图全部上传到一个文件夹中。它可以工作，只是当我上传 Canvas 时，它会在创建文件夹之前上传它，从而将其放入任何内容中。我已经修复了这个问题，说它需要在提交表单和所有图像后上传。但是这会导致页面刷新，从而重置我的 Canvas 绘图(到空白 Canvas )。我需要一种方法来记住页面刷新时的 Canvas 绘图。这是我的代码:

<?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 基于值为 1 的隐藏输入字段，因此它只会在提交表单后发送

** 在此处插入标准 HTML 页面代码 **

然后这是我的 Canvas ，位于表单内

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

那么如何让 Canvas 记住页面重新加载之前绘制的内容呢？

需要帮助:p

Answer 1

页面需要刷新吗？如果您已经进行 ajax 调用，那么使用 preventDefault 停止刷新并让其余代码执行可能会更容易。然后，您将能够保留对 Canvas 对象的引用。