estoy desarrollando una aplicación en html, php y algo de javascript, seguro que alguno ya ha leído por aquí mis dudas. Tengo un canvas donde hago una firma para los usuarios y tengo en mi form, un botón en el que convierto el canvas en una imagen png y automáticamente me aparece el cuadro de windows para seleccinar carpeta donde descargar, pero yo no quiero eso. Yo quiero, que automáticamente se descargue la firma en una carpeta. Adjunto código html y JavaScript
Definición del canvas:
<canvas id="canvas">
Su navegador no soporta canvas
</canvas>
Este es el fragmento de código para el botón de transformación:
<script type="text/javascript">
function guardar() {
var link = document.createElement('a')
link.download = "firma";
link.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
link.click();
}
</script>
Eventos del canvas:
<script type="text/javascript">
var limpiar = document.getElementById("limpiar");
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var cw = canvas.width = 150, cx = cw / 2;
var ch = canvas.height = 150, cy = ch / 2;
var dibujar = false;
var factorDeAlisamiento = 5;
var trazados = [];
var puntos = [];
ctx.lineJoin = "round";
limpiar.addEventListener('click', function(evt){
dibujar = false;
ctx.clearRect(0, 0, cw, ch);
trazados.length = 0;
puntos.length = 0;
}, false);
canvas.addEventListener('mousedown', function(evt) {
dibujar = true;
//ctx.clearRect(0, 0, cw, ch);
ctx.beginPath();
}, false);
canvas.addEventListener('mouseup', function(evt) {
dibujar = false;
}, false);
canvas.addEventListener("mouseout", function(evt) {
dibujar = false;
}, false);
canvas.addEventListener("mousemove", function(evt) {
if (dibujar) {
var m = oMousePos(canvas, evt);
puntos.push(m);
ctx.lineTo(m.x, m.y);
ctx.stroke();
}
}, false);
function reducirArray(n,elArray) {
var nuevoArray = [];
nuevoArray[0] = elArray[0];
for (var i = 0; i < elArray.length; i++) {
if (i % n == 0) {
nuevoArray[nuevoArray.length] = elArray[i];
}
}
nuevoArray[nuevoArray.length - 1] = elArray[elArray.length - 1];
Trazados.push(nuevoArray);
}
function calcularPuntoDeControl(ry, a, b) {
var pc = {}
pc.x = (ry[a].x + ry[b].x) / 2;
pc.y = (ry[a].y + ry[b].y) / 2;
return pc;
}
function alisarTrazado(ry) {
if (ry.length > 1) {
var ultimoPunto = ry.length - 1;
ctx.beginPath();
ctx.moveTo(ry[0].x, ry[0].y);
for (i = 1; i < ry.length - 2; i++) {
var pc = calcularPuntoDeControl(ry, i, i + 1);
ctx.quadraticCurveTo(ry[i].x, ry[i].y, pc.x, pc.y);
}
ctx.quadraticCurveTo(ry[ultimoPunto - 1].x, ry[ultimoPunto - 1].y, ry[ultimoPunto].x, ry[ultimoPunto].y);
ctx.stroke();
}
}
function redibujarTrazados(){
dibujar = false;
ctx.clearRect(0, 0, cw, ch);
reducirArray(factorDeAlisamiento,puntos);
for(var i = 0; i < Trazados.length; i++){
alisarTrazado(Trazados[i]);
}
}
function oMousePos(canvas, evt){
var ClientRect = canvas.getBoundingClientRect();
return { //objeto
x: Math.round(evt.clientX - ClientRect.left),
y: Math.round(evt.clientY - ClientRect.top)
}
}
</script>
Me faltaría el código o parte de código, para saber como guardar la imagen en una ruta en concreto, una carpeta en concreto.
un saludo y gracias de antemano.