Estoy intentando desarrollar una pequeña aplicación para la gestión de usuarios de una clínica, y me encuentro con un problema y es el siguiente. Esta clínica, tiene que hacer firmar a sus pacientes una hoja de papel, que es la ley de protección de datos en España y para ahorrar papel, tinta etc. La clínica me ha ofrecido desarrollar la aplicación y de paso pues la ley de protección de datos entre otras cosas poder firmarla de forma digital. Bien, hasta aquí mas o menos bien. Para la firma he desarrollado un pequeño recuadro con "canvas" de html5 y a este le he asignado un pequeño script de javascript, adjunto código más abajo. Pero ahora, interesa guardar esta firma de dicha persona en una base de datos o como archivo por separado en el hosting... Y mi pregunta es, como puedo hacer esta parte?? he estado leyendo de que se puede hacer con esta función
canvas.toDataURL();
pero no lo consigo y no encuentro nada realmente util para mi. ¿Podéis echarme una mano? Gracias de ante mano.
Adjunto código hasta ahora.
1º HTML
<canvas id="canvas">
Su navegador no soporta canvas
</canvas>
2º código JavaScript para el dibujo, y eventos de ratón para el 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>
3º código para intentar guardar el canvas en una imagen, como he leído por ahí
<script>
function convertToImg(canvas){
var image = canvas.toDataURL();
var canvas = new Image();
var convertir = document.getElementById("convertir").src = image;
//return canvas;
}
convertir.addEventListener('click', function(evt){
dibujar = false;
ctx.clearRect(0, 0, cw, ch);
trazados.length = 0;
puntos.length = 0;
}, false);
</script>
por último un botón que hace la llamada al script para convertir el canvas en imagen
<button id="convertir">Convertir</button>
hasta aquí bien o al menos lo he conseguido, pero no consigo pasar el canvas a imagen y luego guardarla en un BD de MySQL o guardarla directamente en MySQL. ¿Que tipo de dato habría que usar en la BD para guardar este tipo de cosas?
Un saludo y gracias de antemano