1

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.

2 respuestas 2

0

Para enviar la imagen al servidor preparas un form la incluyes como campo "file" y se envias, pero al tenerla en un canvas lo tienes mas sencillo, ya que puedes enviar la imagen a php como una coleccion de puntos mediante json luego la puedes guardar en un campo de la base de datos y convertir a imagen cuando mas te convenga con la clase sigToSvg (https://github.com/kaltura/agent-contrib/blob/master/sigToSvg.php), si en vez de svg la prefieres en png o jpeg usas la clase Imagick o gd, desde php quedaria asi:


    include "sigToSvg.php";
    try {
        $svg = new sigToSvg($_POST['datos_de_firma_en_json'], array('penWidth' => 5));
// Penwidth es el ancho del trazo
    } catch (Exception $e) {
        die($e->getMessage());
    }

    $im=new Imagick();
    $im->readImageBlob($svg->getImage());
    $im->setImageFormat("jpeg");
    $im->adaptiveResizeImage(550, 250);
    //Tamaño de la imagen
 $im->writeImage('/directorio_de_imagenes/nombre_de_imagen.jpg');
    $im->clear();
    $im->destroy();

Si aun asi quieres enviar la imagen como imagen:


document.getElementByTagName('body').appendChild('<div id="divForForm"></div>');
document.getElementById('divForForm').innerHtml('<form  id="myImgForm" enctype="multipart/form-data" action="__URL__" method="POST"><input name="ipng" type="file"/></form>');

Luego envias el formulario normal o por ajax De forma normal:


document.getElementById('myImgForm').submit();

por ajax:


    var formd = new FormData($('#myImgForm')[0]);
    $.ajax({
            url: $('#myImgForm').attr('action'),
            method: "POST",
            dataType: 'json',
            data: formd,
            processData: false,
            contentType: false,
            success: function(r){
                 //Cosas a hacer si a salido bien
            },
            error: function(r){
                //Cosas a hacer si a salido mal
            }
   });

Espero que te sirva

4
  • Gracias a todos por responder, pero no se como implementar lo que me decís. JavaScript es nuevo para mi y con php no tengo unos conocimientos muy extendidos. Quizás no tenga muy claro lo que quiero hacer o como lo quiero hacer, pero es lo siguiente. Se firma un documento, esa firma, la quiero guardar en una carpeta en el servidor. Ya he conseguido el canvs pasarlo a imagen, ahora quiero guardarla automáticamente en una carpeta del servidor, una ruta preestablecida y de ahí, transformarla en base 64 para introducirla en la base de datos. No se si está claro lo que digo o mas simple de otra form
    – scorpions
    el 10 sep. 2017 a las 16:09
  • a ver si me podéis orientar por favor
    – scorpions
    el 10 sep. 2017 a las 16:11
  • Por eso te comentaba el guardar solo el array de puntos del canvas, ahorras espacio en la base de datos y lo puedes transformar a svg o png cuando quieras, creo que es la mejor opcion.
    – Javier
    el 10 sep. 2017 a las 21:42
  • Tienes el array puntos lo envias al servidor con el boton download (si se te hace mas facil) example.com/…, en la pagina de destino tienes el codigo php de mi respuesta y añades al final header('content img/png'); echo file_get_contents('/directorio_de_imagenes/nombre_de_imagen.jpg'); die; asi la guardas en la bbdd, la guardas como imagen y la envias para descarga al cliente en un solo paso.
    – Javier
    el 10 sep. 2017 a las 21:49
0

La respuesta corta es que no es posible forzar eso.

La razón es simple, es el navegador (o el usuario) el que decide si mostrar la ventana de "Guardar como" o no, desde Javascript no puedes controlar eso ya que es preferencia del usuario y el navegador no provee un API para alterar esa configuración, algunos navegadores vienen con esta opción activada por defecto, otros no.

En Chrome puedes mirarla en chrome://settings/ >> Advanced >> Downloads >> "Ask where to save each file before downloading"

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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