Home / Questions / 99146
Accepted
scorpions
Asked: 2020-09-02 01:12:31 +0800 CST 2020-09-02 01:12:31 +0800 CST

Save image (canvas) automatically on server with PHP

  • 772

I have managed to save a canvas as an image, using javaScript and Ajax, but I want or would like a dialog box not to appear to choose the destination folder, but rather to save it in a pre-established path.

Code block attached:

<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>

In that code block, I define the function to convert to image, but I need to further automate this process, by saving the image to a preset path on a server using PHP and the function call will be made at the same time the administrator gives register a user.

I also have the question of how can I upload the image to the server? I need to save the signature in a database, I have the doubt of whether to upload the image to the database or in the database to save the path of the image.

php

2 Answers

  1. Based on the little code you have shared I have created a canvas and filled it with a red square. When the button is pressed, an XHR query is generated to the same PHP with the POST method that sends the image encoded in BASE64.

    PHP, when it detects the sending by POST of the field imagen, removes the initial header (up to the first comma) and decodes the BASE64 data to save it later in a file called imagen.png.

    The XHR code displays a link that allows you to view the image saved on the server. It is important that the server has write permissions on it for it to work.

    Here is the example:

    <?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>
    • 1
  2. Best Answer

    widthIt is important to set the and attributes heightof the canvas directly and not through cssthem as they do not refer to the style, but to the size of the canvas <canvas>. The image is sent to the server in Base64.

    The path where the image is stored must have the necessary permissions.

    I have commented the most important parts:

    <!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>

    Note: If it is going to be used for signatures or sensitive data, the images should be saved in a directory that is not public, to restrict access.

    • 0