Dibujar con el mouse en Canvas HTML5 y Guardar la imagen con PHP

Vamos a hacer un dibujo en el canvas de html5 como si fuera un lienzo de Paint y vamos a guardar la imagen en el servidor con PHP.

Lo que haremos sera usar un plugin llamado signature_pad.

El plugin signature_pad esta en el repositorio de Github del creador: https://github.com/szimek/signature_pad

Lo mas importante es el archivo signature_pad.js que contiene una serie de funciones pero nosotros vamos a usar la configuración básica.

Codigo

En un documento HTML debemos incluir lo siguiente:

Primero las librerias que usaremos.

<script src="jquery.min.js"></script>
<script src="signature_pad.js"></script>

Después vamos por el componente canvas.

<!-- Contenedor y Elemento Canvas -->
  <div id="signature-pad" class="signature-pad" >
      <div class="description">Dibujar aqui</div>
    <div class="signature-pad--body">
      <canvas style="width: 640px; height: 420px; border: 1px black solid; " id="canvas"></canvas>
    </div>
  </div>

<!-- Formulario que recoge los datos y los enviara al servidor -->
 <form id="form" action="./savedraw.php" method="post">
    <input type="hidden" name="pacient_id" value="<?php echo $user->id; ?>">
    <input type="hidden" name="base64" value="" id="base64">
    <button id="saveandfinish" class="btn btn-success">Guardar y Finalizar</button>
</form>

Lo siguiente es el script para iniciar el plugin signature_pad.

También se crea una función resizeCanvas que se usa cuando se inicia el canvas y cuando las dimensiones de la ventana cambian.

var wrapper = document.getElementById("signature-pad");

var canvas = wrapper.querySelector("canvas");
var signaturePad = new SignaturePad(canvas, {
  backgroundColor: 'rgb(255, 255, 255)'
});

function resizeCanvas() {

  var ratio =  Math.max(window.devicePixelRatio || 1, 1);

  canvas.width = canvas.offsetWidth * ratio;
  canvas.height = canvas.offsetHeight * ratio;
  canvas.getContext("2d").scale(ratio, ratio);

  signaturePad.clear();
}

window.onresize = resizeCanvas;
resizeCanvas();

Ahora seguimos con el script que va a enviar los datos del dibujo por POST para que sea posible guardar en el servidor.

   document.getElementById('form').addEventListener("submit",function(e){

    var ctx = document.getElementById("canvas");
      var image = ctx.toDataURL(); // data:image/png....
      document.getElementById('base64').value = image;
   },false);

Por ultimo pero no menos importante, el script PHP (savedraw.php) que recibe los datos y los guarda en una imagen.

//print_r($_POST);
$img = $_POST['base64'];
$img = str_replace('data:image/png;base64,', '', $img);
$fileData = base64_decode($img);
$fileName = uniqid().'.png';

file_put_contents($fileName, $fileData);

header("Location: ./index.html");

Resultado

El resultado seria el siguiente:

Descargar

A continuación les dejo la descarga del código del ejemplo utilizado. Incluye: Archivos html, js , php e imágenes.

Link: https://drive.google.com/file/d/1KStCz9VNT1ikaKjKGMagUeyRryrFRu94/view

Conclusion

Esta función para dibujar y guardar imágenes tiene muchas aplicaciones, recientemente la utilice para crear un formulario donde el usuario tiene que agregar su firma y esta firma se guarda como imagen en el servidor y después se muestra en un documento PDF.

Y bueno cualquier otro uso que ustedes le quieran dar.