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

Posted 2023-05-07

技术标签:

【中文标题】将画布图像保存到主机服务器【英文标题】：Saving canvas image onto host server 【发布时间】：2017-09-22 16:00:55 【问题描述】：

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

这实质上将允许人们在画布上进行协作。

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

另外说明 - 如果可以删除保存按钮并且可以每隔几秒调用一次保存函数会很好 - 但这可能会很棘手。

<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"   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>

【问题讨论】：

您愿意将图像存储在客户端上吗？在服务器上怎么样 - 您是否考虑过是否/如何将图像存储在那里？我在想我可以将图像保存在我的服务器上，然后让脚本调用以每 3 秒保存一次覆盖文件好的，太好了！您正在运行什么服务器端框架？。网？ php? 不幸的是，我正在使用的框架不支持 PHP，这使得它变得更加困难 【参考方案1】：

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

图像在服务器上后如何保存可能是一个单独的问题，这在很大程度上取决于您的具体情况。无论如何保存，图像数据都将通过 POST 表单传输到服务器，您可以在其中对数据做任何您想做的事情。

<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;

    var saveTimer;
    function onSaveTimer() 
          save();              
    


    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);
        
       // saveTimer = setInterval(onSaveTimer, 3000);
    

    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();
        if (dataURL)  
            document.getElementById("canvasimg").src = dataURL;
            document.getElementById("canvasimg").style.display = "inline";
            return true; // will POST form to the server
        
        return false; // will not POST to server

    

    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"   style="position:absolute;border:2px solid;"></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>
<form method="POST" action="" onsubmit="save">
        <img id="canvasimg" style="position:relative;top:10%;left:600px;" style="display:none;">
</form>
        <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>

【讨论】：

【参考方案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/***/demo1.html

【讨论】：

Sam 非常感谢你，这是一个绝妙的主意！我使用的框架不支持 PHP，这是一个很好的替代方案。你有什么想法吗？我是 URI 新手如果您必须使用托管图像，请使用 Imgur 的 API 之类的东西。 apidocs.imgur.com cookie 路由的问题是它只会为那个用户保存。有没有办法将 cookie 存储到服务器上，这样如果被另一个 ip 访问，他们就会看到最后一个用户存储的 cookie？我很确定你不能......除非你使用一个外部数据库，该数据库由包含 url 和查询字符串中的数据的脚本标签访问。如果javascript可以以某种方式写入文件，那么是的，您可以只写入文件。您已经可以使用 javascript 读取文件，但要写入它们... 如果你可以使用node.js，那么你应该没问题......你使用GitHub吗？自己的服务器？还有什么？

以上是关于将画布图像保存到主机服务器的主要内容，如果未能解决你的问题，请参考以下文章

将画布图像保存到服务器

将画布作为 jpg 文件保存到服务器时如何增加 DPI？

将 three.js 生成的画布保存到服务器 - 没有文件被保存

按下按钮时，HTML画布将JPG图像输出到服务器

如何将内联 svg（在 DOM 中）绘制到画布上？

将 HTML 5 画布保存到 Chrome 中的文件？