2

He conseguido guardar un canvas como imagen, usando javaScript y Ajax, pero quiero o me gustaría que no apareciera cuadro de dialogo para elegir la carpeta de destino, si no que se guardara en una ruta preestablecida.

Adjunto bloque de código:

<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>
<button onclick="guardar()" id="convertir">Convertir</button>

En ese bloque de código, defino la función para convertir a imagen, pero necesito automatizar más este proceso, guardando la imagen en una ruta preestablecida en un servidor usando PHP y la llamada a la función se hará a la misma vez que el administrador dé de alta a un usuario.

También tengo la duda de ¿¿cómo puedo subir la imagen al servidor?? necesito guardar en una base de datos la firma, tengo la duda de si subir la imagen a la base de datos o en la base de datos guardar la ruta de la imagen.

9
  • He editado un poco tu pregunta para aclarar algunos detalles que olvidaste pero están reflejados en las etiquetas (como que el servidor tiene PHP, etc). Por favor, incluye la parte de Ajax. ¿Es XHR puro o a través de jQuery? ¿Qué has intentado? En ese código sólo aparece el ejemplo para guardar en disco local la imagen. Commented el 1 sept. 2017 a las 9:17
  • @OscarGarcia efectivamente, solo puedo guardarlo en disco local, no se que es XHR ya que estoy empezando a ver pequeñas cosas de javaScript y no se nada prácticamente aun. he incluido todo el bloque de código que definí para guardar la imagen, que transformar el canvas en un png lo hace, pero necesito que lo guarde en una carpeta directamente
    – scorpions
    Commented el 1 sept. 2017 a las 9:20
  • ¿El canvas es para debía a mano alzada por casualidad? Hace algún tiempo tube que hacer algo similar para recoger las firmas de lo clientes, si es esto lo que necesitas dímelo y te pongo el ejemplo completo de como hice. @scorpions
    – Xerif
    Commented el 1 sept. 2017 a las 9:27
  • ¿En la "carpeta" (directorio) local o remota? Supongo que remota. XHR es HttpHttpRequest y tú has sido el que ha usado el término AJAX. Supuse que esa parte ya la habías intentado. ¿Usas jQuery o no? Commented el 1 sept. 2017 a las 9:28
  • @Xerif efectivamente, he realizado un canvas para que los clientes puedan firmar y luego esa firma guardarla o bien en la BD o en una carpeta en el servidor, no se como enfocarlo
    – scorpions
    Commented el 1 sept. 2017 a las 9:33

2 respuestas 2

1

Basándome en el poco código que has compartido he creado un canvas y lo he rellenado de un cuadrado rojo. Cuando se pulsa el botón se genera una consulta XHR al mismo PHP con el método POST que envía la imagen codificada en BASE64.

El PHP, cuando detecta el envío por POST del campo imagen, quita la cabecera inicial (hasta la primera coma) y decodifica los datos BASE64 para guardarlos posteriormente en un archivo llamado imagen.png.

El código XHR muestra un enlace que te permite ver la imagen guardada en el servidor. Es importante que el servidor tenga permisos de escritura en él para que funcione.

Aquí tienes el ejemplo:

<?php
if (isset($_POST['imagen'])) {
    $datos = base64_decode(
      preg_replace('/^[^,]*,/', '', $_POST['imagen'])
    );
    file_put_contents('imagen.png', $datos);
    die('OK');
}
?>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<p><button onclick="guardar()" id="convertir">Convertir</button></p>
<canvas id="canvas" width="200" height="100" style="border: 1px solid black;">
No soportas canvas
</canvas>
<p><a id="imagen" href="imagen.png" target="_blank">Ver imagen generada</a></p>
<script type="text/javascript">
/* Dibujo un recuadro rojo en el canvas */
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(50, 25, 100, 50);
$( '#imagen' ).hide();

function guardar() {
    var imagen = canvas.toDataURL("image/png");
    /* Envío la petición XHR al servidor con los datos de la imagen */
    $.ajax({
        url: "<?= $_SERVER['PHP_SELF'] ?>",
        method: 'post',
        data: { imagen: imagen},
    }).done(function(retorno) {
        alert(retorno);
        $( '#imagen' ).show();
    });
}
</script>
0

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.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.