Es importante establecer los atributos width
y height
del canvas directamente y no hacerlo mediante css
ya que no hacen referencia al estilo, si no al tamaño del lienzo <canvas>
. La imagen se envia al servido en Base64
.
La ruta donde se almacene la imagen debe tener los permisos necesarios.
He comentado las partes más importantes:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ejemplo canvas mano alzada</title>
</head>
<body>
<!-- creamos el camvas -->
<canvas id='canvas' width="200" height="200" style='border: 1px solid #CCC;'>
<p>Tu navegador no soporta canvas</p>
</canvas>
<!-- creamos el form para el envio -->
<form id='formCanvas' method='post' action='#' ENCTYPE='multipart/form-data'>
<button type='button' onclick='LimpiarTrazado()'>Borrar</button>
<button type='button' onclick='GuardarTrazado()'>Guardar</button>
<input type='hidden' name='imagen' id='imagen' />
</form>
<script type="text/javascript">
/* Variables de Configuracion */
var idCanvas='canvas';
var idForm='formCanvas';
var inputImagen='imagen';
var estiloDelCursor='crosshair';
var colorDelTrazo='#555';
var colorDeFondo='#fff';
var grosorDelTrazo=2;
/* Variables necesarias */
var contexto=null;
var valX=0;
var valY=0;
var flag=false;
var imagen=document.getElementById(inputImagen);
var anchoCanvas=document.getElementById(idCanvas).offsetWidth;
var altoCanvas=document.getElementById(idCanvas).offsetHeight;
var pizarraCanvas=document.getElementById(idCanvas);
/* Esperamos el evento load */
window.addEventListener('load',IniciarDibujo,false);
function IniciarDibujo(){
/* Creamos la pizarra */
pizarraCanvas.style.cursor=estiloDelCursor;
contexto=pizarraCanvas.getContext('2d');
contexto.fillStyle=colorDeFondo;
contexto.fillRect(0,0,anchoCanvas,altoCanvas);
contexto.strokeStyle=colorDelTrazo;
contexto.lineWidth=grosorDelTrazo;
contexto.lineJoin='round';
contexto.lineCap='round';
/* Capturamos los diferentes eventos */
pizarraCanvas.addEventListener('mousedown',MouseDown,false);// Click pc
pizarraCanvas.addEventListener('mouseup',MouseUp,false);// fin click pc
pizarraCanvas.addEventListener('mousemove',MouseMove,false);// arrastrar pc
pizarraCanvas.addEventListener('touchstart',TouchStart,false);// tocar pantalla tactil
pizarraCanvas.addEventListener('touchmove',TouchMove,false);// arrastras pantalla tactil
pizarraCanvas.addEventListener('touchend',TouchEnd,false);// fin tocar pantalla dentro de la pizarra
pizarraCanvas.addEventListener('touchleave',TouchEnd,false);// fin tocar pantalla fuera de la pizarra
}
function MouseDown(e){
flag=true;
contexto.beginPath();
valX=e.pageX-posicionX(pizarraCanvas); valY=e.pageY-posicionY(pizarraCanvas);
contexto.moveTo(valX,valY);
}
function MouseUp(e){
contexto.closePath();
flag=false;
}
function MouseMove(e){
if(flag){
contexto.beginPath();
contexto.moveTo(valX,valY);
valX=e.pageX-posicionX(pizarraCanvas); valY=e.pageY-posicionY(pizarraCanvas);
contexto.lineTo(valX,valY);
contexto.closePath();
contexto.stroke();
}
}
function TouchMove(e){
e.preventDefault();
if (e.targetTouches.length == 1) {
var touch = e.targetTouches[0];
MouseMove(touch);
}
}
function TouchStart(e){
if (e.targetTouches.length == 1) {
var touch = e.targetTouches[0];
MouseDown(touch);
}
}
function TouchEnd(e){
if (e.targetTouches.length == 1) {
var touch = e.targetTouches[0];
MouseUp(touch);
}
}
function posicionY(obj) {
var valor = obj.offsetTop;
if (obj.offsetParent) valor += posicionY(obj.offsetParent);
return valor;
}
function posicionX(obj) {
var valor = obj.offsetLeft;
if (obj.offsetParent) valor += posicionX(obj.offsetParent);
return valor;
}
/* Limpiar pizarra */
function LimpiarTrazado(){
contexto=document.getElementById(idCanvas).getContext('2d');
contexto.fillStyle=colorDeFondo;
contexto.fillRect(0,0,anchoCanvas,altoCanvas);
}
/* Enviar el trazado */
function GuardarTrazado(){
imagen.value=document.getElementById(idCanvas).toDataURL('image/png');
document.forms[idForm].submit();
}
</script>
<?php
// comprovamos si se envió la imagen
if (isset($_POST['imagen'])) {
// mostrar la imagen
echo '<img src="'.$_POST['imagen'].'" border="1">';
// funcion para gusrfdar la imagen base64 en el servidor
// el nombre debe tener la extension
function uploadImgBase64 ($base64, $name){
// decodificamos el base64
$datosBase64 = base64_decode(preg_replace('#^data:image/\w+;base64,#i', '', $base64));
// definimos la ruta donde se guardara en el server
$path= $_SERVER['DOCUMENT_ROOT'].'/firmas/'.$name;
// guardamos la imagen en el server
if(!file_put_contents($path, $datosBase64)){
// retorno si falla
return false;
}
else{
// retorno si todo fue bien
return true;
}
}
// llamamos a la funcion uploadImgBase64( img_base64, nombre_fina.png)
uploadImgBase64($_POST['imagen'], 'mi_imagen_'.date('d_m_Y_H_i_s').'.png' );
}
?>
</body>
</html>
Nota: Si se va ha utilizar para firmas o datos sensibles, las imagenes deberían ser guardadas en algún directorio que no sea público, para restringir los accesos.