Save canvas on server with node.js (or alternative)
Question
Im trying to implement a feature on a hosted platform which does not allow PHP . Only JS & HTML. And Im stuck!
I have built this canvas which allows your to draw and then save via document.getElementById("canvasimg")
I want that image to somehow be saved onto the server and get re-called when a new user visit, so they will see what has been last saved on the canvas.
I was thinking to have a hosted file that get over-wrote when the user saves a new version of the canvas. Then that image can get called into the canvas as a background image to allow the next person to continue drawing on it?
Here is my code:
<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>
1 answers
solution1
0 2017-09-27 13:22:42
You can't.
If you can't modify the server (eg PHP) then you certainly won't be able to use NodeJS.
The only thing you can do is save the canvas to localStorage or sessionStorage but those are temporary.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.