将画布图像保存到主机服务器
[英]Saving canvas image onto host server
问题描述
我已经创建了一个画板画布，我想看看现在是否可以将保存功能将画布保存到服务器，以便在重新加载站点时出现最后一个保存的画布，可以继续进行绘制了。
从本质上讲，这将使人们可以在画布上进行协作。
我现在有一个保存功能，该功能仅将画布呈现为原始画布旁边的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" 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>
2 个解决方案
解决方案1
0 2017-09-22 19:24:42
这是脚本/ 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" width="500px" height="675px" 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
0 2017-09-22 19:31:52
使用cookie将信息另存为DataURI，然后将该cookie调用到图像元素的src中。 然后，使用画布从img元素中提取图像。
编辑：如果要将其保存到主机服务器，请使用PHP和以下内容：
file_put_contents("/tmp/myFileName.png",base64_decode(str_replace(" ","+",$_GET["data"])));
为了保存，只需将变量“ data”设置为canvas.toDataURL（）向php页面发送请求即可
编辑2：这是非PHP解决方案的示例： http : //id0t.x10.mx/StackOverflow/demo1.html
使用toDataURL（）将画布另存为服务器上的图像时出现问题；
[英]Problem with saving canvas as image on server using toDataURL();
将画布的内容发送到Java服务器并将其另存为图像
[英]Sending the contents of a canvas to a Java server and saving it as an image
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.