Question

我创建了一个画板画布，我想看看现在是否可以使用保存功能将画布保存到服务器，这样当重新加载网站时，最后保存的画布似乎已准备好继续绘制。

这基本上允许人们在画布上进行合作。

我现在有一个保存功能，它只是将画布渲染为原始画布旁边的png，但我不确定如何将它带到下一个阶段。

另外一个注意事项 - 如果可以删除保存按钮并且每隔几秒就可以调用一次保存功能会很好 - 但这可能会很棘手。

＆＃13;

<html>
    <script type="text/javascript">
    var canvas, ctx, flag = false,
        prevX = 0,
        currX = 0,
        prevY = 0,
        currY = 0,
        dot_flag = false;

    var x = "black",
        y = 2;

    function init() {
        canvas = document.getElementById('can');
        ctx = canvas.getContext("2d");
        w = canvas.width;
        h = canvas.height;

        canvas.addEventListener("mousemove", function (e) {
            findxy('move', e)
        }, false);
        canvas.addEventListener("mousedown", function (e) {
            findxy('down', e)
        }, false);
        canvas.addEventListener("mouseup", function (e) {
            findxy('up', e)
        }, false);
        canvas.addEventListener("mouseout", function (e) {
            findxy('out', e)
        }, false);
    }

    function color(obj) {
        switch (obj.id) {
            case "black":
                x = "black";
                break;
            case "white":
                x = "white";
                break;
        }
        if (x == "white") y = 14;
        else y = 2;

    }

    function draw() {
        ctx.beginPath();
        ctx.moveTo(prevX, prevY);
        ctx.lineTo(currX, currY);
        ctx.strokeStyle = x;
        ctx.lineWidth = y;
        ctx.stroke();
        ctx.closePath();
    }

    function erase() {
        var m = confirm("Want to clear");
        if (m) {
            ctx.clearRect(0, 0, w, h);
            document.getElementById("canvasimg").style.display = "none";
        }
    }

    function save() {
        document.getElementById("canvasimg").style.border = "2px solid";
        var dataURL = canvas.toDataURL();
        document.getElementById("canvasimg").src = dataURL;
        document.getElementById("canvasimg").style.display = "inline";
    }

    function findxy(res, e) {
        if (res == 'down') {
            prevX = currX;
            prevY = currY;
            currX = e.clientX - canvas.offsetLeft;
            currY = e.clientY - canvas.offsetTop;

            flag = true;
            dot_flag = true;
            if (dot_flag) {
                ctx.beginPath();
                ctx.fillStyle = x;
                ctx.fillRect(currX, currY, 2, 2);
                ctx.closePath();
                dot_flag = false;
            }
        }
        if (res == 'up' || res == "out") {
            flag = false;
        }
        if (res == 'move') {
            if (flag) {
                prevX = currX;
                prevY = currY;
                currX = e.clientX - canvas.offsetLeft;
                currY = e.clientY - canvas.offsetTop;
                draw();
            }
        }
    }
    </script>
    <body onload="init()">
        <canvas id="can" width="500px" height="675px" style="position:absolute;border:2px solid;background:url(http://files.cargocollective.com/715286/sticker.jpg);background-size:100%100%;"></canvas>
        <div style="position:relative;top:40px;left:600px;">Eraser</div>
        <div style="position:relative;top:50px;left:600px;width:15px;height:15px;background:white;border:2px solid;" id="white" onclick="color(this)"></div>
        <div style="position:relative;top:100px;left:600px;width:15px;height:15px;background:black;border:2px solid;" id="black" onclick="color(this)"></div>
        <div style="position:relative;top:50px;left:600px;">Pen</div>
        <img id="canvasimg" style="position:relative;top:10%;left:600px;" style="display:none;">
        <input type="button" value="save" id="btn" size="30" onclick="save()" style="position:relative;top:150px;left:594px;">
        <input type="button" value="clear" id="clr" size="23" onclick="erase()" style="position:relative;top:180px;left:550px;">
    </body>
    </html>

＆＃13;

Answer 1

这是您的脚本/ html的修改版本，它将img包装到表单标记中，并使用setInterval https://www.w3schools.com/jsref/met_win_setinterval.asp每3秒调用一次保存函数（取消注释{{1}中的行启用）。

如果将图像保存在服务器上，如何保存图像可能是一个单独的问题，在很大程度上取决于您的情况。无论如何保存，图像数据都将通过POST格式传输到服务器，您可以在其中使用数据执行任何操作。

init

Answer 2

使用cookie将信息保存为DataURI，然后将该cookie调用到图像元素的src中。然后，使用canvas从img元素中提取图像。

编辑：如果要将其保存到主机服务器，请使用PHP和以下内容：

file_put_contents("/tmp/myFileName.png",base64_decode(str_replace(" ","+",$_GET["data"])));

要保存，只需向php页面发送请求，并将变量“data”设置为canvas.toDataURL（）

编辑2：这是非php解决方案的一个例子： http://id0t.x10.mx/StackOverflow/demo1.html

将画布图像保存到主机服务器上

2 个答案: