0
J'ai créé un canevas d'esquisse et j'ai voulu voir s'il était possible maintenant d'enregistrer la toile sur le serveur, de sorte que lorsque le site est rechargé, le dernier canevas enregistré semble prêt à continuer se basant sur.Enregistrement de l'image de canevas sur le serveur hôte
Cela permettra essentiellement aux gens de collaborer sur le dessin sur la toile.
J'ai maintenant une fonction de sauvegarde qui rend juste la toile comme png à côté de la toile d'origine mais je ne sais pas comment passer à l'étape suivante.
Sur une note séparée - il serait bon que le bouton de sauvegarde puisse être retiré et que la fonction de sauvegarde puisse être appelée toutes les quelques secondes - mais cela pourrait être difficile.
<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>
êtes-vous ouvert à stocker l'image sur le client? que diriez-vous sur le serveur - avez-vous pensé à si/comment vous voulez stocker l'image là-bas? –
je pensais que je pourrais avoir l'image enregistrée sur mon serveur, puis avoir l'appel de script pour enregistrer toutes les 3 secondes sur-redressant le fichier –
ok, super! Quel framework côté serveur utilisez-vous? .NET? PHP? –