Guardar imagen de un Canvas HTML5

Buenas tardes comunidad. Nuevamente necesito de su ayuda.

Tengo un formulario con varios inputs (nombres, apellidos, etc) y tengo un canvas donde se realizan una serie de trazos (por ejemplo pudiera ser una firma) y necesito subir esa imagen a una carpeta del servidor apache. He buscado en internet y no consigo un método efectivo para esto. Lo máximo que he logrado es convertir esos trazos en una imagen base64 pero si guardo eso en un campo de mi base de datos me va a ocupar mucho espacio y no es lo que quiero.

La pregunta especifica es: Como puedo guardar directamente en una carpeta del servidor apache (ejemplo "public/imagenes/imagen01.png") la imagen del canvas y en la base de datos solo la ruta de esa imagen.

Gracias de antemano, saludos.

1:50 p. m. · 28 mar. 2019

Nathenn Sanchez

@nathennsanchez941

Guardar imagen de un Canvas HTML5

Buenas tardes comunidad. Nuevamente necesito de su ayuda.

Tengo un formulario con varios inputs (nombres, apellidos, etc) y tengo un canvas donde se realizan una serie de trazos (por ejemplo pudiera ser una firma) y necesito subir esa imagen a una carpeta del servidor apache. He buscado en internet y no consigo un método efectivo para esto. Lo máximo que he logrado es convertir esos trazos en una imagen base64 pero si guardo eso en un campo de mi base de datos me va a ocupar mucho espacio y no es lo que quiero.

La pregunta especifica es: Como puedo guardar directamente en una carpeta del servidor apache (ejemplo "public/imagenes/imagen01.png") la imagen del canvas y en la base de datos solo la ruta de esa imagen.

Gracias de antemano, saludos.

1:50 p. m. · 28 mar. 2019

Nathenn Sanchez

@nathennsanchez941

Guardar imagen de un Canvas HTML5

Buenas tardes comunidad. Nuevamente necesito de su ayuda.

Tengo un formulario con varios inputs (nombres, apellidos, etc) y tengo un canvas donde se realizan una serie de trazos (por ejemplo pudiera ser una firma) y necesito subir esa imagen a una carpeta del servidor apache. He buscado en internet y no consigo un método efectivo para esto. Lo máximo que he logrado es convertir esos trazos en una imagen base64 pero si guardo eso en un campo de mi base de datos me va a ocupar mucho espacio y no es lo que quiero.

La pregunta especifica es: Como puedo guardar directamente en una carpeta del servidor apache (ejemplo "public/imagenes/imagen01.png") la imagen del canvas y en la base de datos solo la ruta de esa imagen.

Gracias de antemano, saludos.

1:50 p. m. · 28 mar. 2019

Nathenn Sanchez

@nathennsanchez941

Guardar imagen de un Canvas HTML5

Buenas tardes comunidad. Nuevamente necesito de su ayuda.

Tengo un formulario con varios inputs (nombres, apellidos, etc) y tengo un canvas donde se realizan una serie de trazos (por ejemplo pudiera ser una firma) y necesito subir esa imagen a una carpeta del servidor apache. He buscado en internet y no consigo un método efectivo para esto. Lo máximo que he logrado es convertir esos trazos en una imagen base64 pero si guardo eso en un campo de mi base de datos me va a ocupar mucho espacio y no es lo que quiero.

La pregunta especifica es: Como puedo guardar directamente en una carpeta del servidor apache (ejemplo "public/imagenes/imagen01.png") la imagen del canvas y en la base de datos solo la ruta de esa imagen.

Gracias de antemano, saludos.

1:50 p. m. · 28 mar. 2019

Nathenn Sanchez @nathennsanchez94128 mar

Buenas tardes comunidad.

Al fin después de tanto buscar di con la solución. La posteo acá abajo para futuras referencias.

Gracias...

&lt;html lang=&#34;es&#34;&gt;
&lt;head&gt;
   &lt;meta charset=&#34;UTF-8&#34; /&gt;
   &lt;meta name=&#34;viewport&#34; content=&#34;width=device-width, initial-scale=1&#34;&gt;
   &lt;title&gt;Ejemplo canvas mano alzada&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;!-- creamos el camvas --&gt;
&lt;canvas id=&#39;canvas&#39; width=&#34;200&#34; height=&#34;200&#34; style=&#39;border: 1px solid #CCC;&#39;&gt;
   &lt;p&gt;Tu navegador no soporta canvas&lt;/p&gt;
&lt;/canvas&gt;

&lt;!-- creamos el form para el envio --&gt;
&lt;form id=&#39;formCanvas&#39; method=&#39;post&#39; action=&#39;#&#39; ENCTYPE=&#39;multipart/form-data&#39;&gt;
   &lt;button type=&#39;button&#39; onclick=&#39;LimpiarTrazado()&#39;&gt;Borrar&lt;/button&gt;
   &lt;button type=&#39;button&#39; onclick=&#39;GuardarTrazado()&#39;&gt;Guardar&lt;/button&gt;
   &lt;input type=&#39;hidden&#39; name=&#39;imagen&#39; id=&#39;imagen&#39; /&gt;
&lt;/form&gt;

&lt;script type=&#34;text/javascript&#34;&gt;
   /* Variables de Configuracion */
   var idCanvas=&#39;canvas&#39;;
   var idForm=&#39;formCanvas&#39;;
   var inputImagen=&#39;imagen&#39;;
   var estiloDelCursor=&#39;crosshair&#39;;
   var colorDelTrazo=&#39;#555&#39;;
   var colorDeFondo=&#39;#fff&#39;;
   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(&#39;load&#39;,IniciarDibujo,false);

   function IniciarDibujo(){
     /* Creamos la pizarra */
     pizarraCanvas.style.cursor=estiloDelCursor;
     contexto=pizarraCanvas.getContext(&#39;2d&#39;);
     contexto.fillStyle=colorDeFondo;
     contexto.fillRect(0,0,anchoCanvas,altoCanvas);
     contexto.strokeStyle=colorDelTrazo;
     contexto.lineWidth=grosorDelTrazo;
     contexto.lineJoin=&#39;round&#39;;
     contexto.lineCap=&#39;round&#39;;
     /* Capturamos los diferentes eventos */
     pizarraCanvas.addEventListener(&#39;mousedown&#39;,MouseDown,false);// Click pc
     pizarraCanvas.addEventListener(&#39;mouseup&#39;,MouseUp,false);// fin click pc
     pizarraCanvas.addEventListener(&#39;mousemove&#39;,MouseMove,false);// arrastrar pc

     pizarraCanvas.addEventListener(&#39;touchstart&#39;,TouchStart,false);// tocar pantalla tactil
     pizarraCanvas.addEventListener(&#39;touchmove&#39;,TouchMove,false);// arrastras pantalla tactil
     pizarraCanvas.addEventListener(&#39;touchend&#39;,TouchEnd,false);// fin tocar pantalla dentro de la pizarra
     pizarraCanvas.addEventListener(&#39;touchleave&#39;,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(&#39;2d&#39;);
     contexto.fillStyle=colorDeFondo;
     contexto.fillRect(0,0,anchoCanvas,altoCanvas);
   }

   /* Enviar el trazado */
   function GuardarTrazado(){
     imagen.value=document.getElementById(idCanvas).toDataURL(&#39;image/png&#39;);
     document.forms[idForm].submit();
   }
&lt;/script&gt;


&lt;?php 
// comprovamos si se envió la imagen
if (isset($_POST[&#39;imagen&#39;])) { 

   // mostrar la imagen
   echo &#39;&lt;img src=&#34;&#39;.$_POST[&#39;imagen&#39;].&#39;&#34; border=&#34;1&#34;&gt;&#39;;

   // 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(&#39;#^data:image/\w+;base64,#i&#39;, &#39;&#39;, $base64));
       // definimos la ruta donde se guardara en el server
       $path= $_SERVER[&#39;DOCUMENT_ROOT&#39;].&#39;/firmas/&#39;.$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[&#39;imagen&#39;], &#39;mi_imagen_&#39;.date(&#39;d_m_Y_H_i_s&#39;).&#39;.png&#39; );
}
?&gt;
&lt;/body&gt;
&lt;/html&gt;

Nathenn Sanchez

@nathennsanchez941

Guardar imagen de un Canvas HTML5

Buenas tardes comunidad. Nuevamente necesito de su ayuda.

Tengo un formulario con varios inputs (nombres, apellidos, etc) y tengo un canvas donde se realizan una serie de trazos (por ejemplo pudiera ser una firma) y necesito subir esa imagen a una carpeta del servidor apache. He buscado en internet y no consigo un método efectivo para esto. Lo máximo que he logrado es convertir esos trazos en una imagen base64 pero si guardo eso en un campo de mi base de datos me va a ocupar mucho espacio y no es lo que quiero.

La pregunta especifica es: Como puedo guardar directamente en una carpeta del servidor apache (ejemplo "public/imagenes/imagen01.png") la imagen del canvas y en la base de datos solo la ruta de esa imagen.

Gracias de antemano, saludos.

1:50 p. m. · 28 mar. 2019

Nathenn Sanchez @nathennsanchez94128 mar

Buenas tardes comunidad.

Al fin después de tanto buscar di con la solución. La posteo acá abajo para futuras referencias.

Gracias...

&lt;html lang=&#34;es&#34;&gt;
&lt;head&gt;
   &lt;meta charset=&#34;UTF-8&#34; /&gt;
   &lt;meta name=&#34;viewport&#34; content=&#34;width=device-width, initial-scale=1&#34;&gt;
   &lt;title&gt;Ejemplo canvas mano alzada&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;!-- creamos el camvas --&gt;
&lt;canvas id=&#39;canvas&#39; width=&#34;200&#34; height=&#34;200&#34; style=&#39;border: 1px solid #CCC;&#39;&gt;
   &lt;p&gt;Tu navegador no soporta canvas&lt;/p&gt;
&lt;/canvas&gt;

&lt;!-- creamos el form para el envio --&gt;
&lt;form id=&#39;formCanvas&#39; method=&#39;post&#39; action=&#39;#&#39; ENCTYPE=&#39;multipart/form-data&#39;&gt;
   &lt;button type=&#39;button&#39; onclick=&#39;LimpiarTrazado()&#39;&gt;Borrar&lt;/button&gt;
   &lt;button type=&#39;button&#39; onclick=&#39;GuardarTrazado()&#39;&gt;Guardar&lt;/button&gt;
   &lt;input type=&#39;hidden&#39; name=&#39;imagen&#39; id=&#39;imagen&#39; /&gt;
&lt;/form&gt;

&lt;script type=&#34;text/javascript&#34;&gt;
   /* Variables de Configuracion */
   var idCanvas=&#39;canvas&#39;;
   var idForm=&#39;formCanvas&#39;;
   var inputImagen=&#39;imagen&#39;;
   var estiloDelCursor=&#39;crosshair&#39;;
   var colorDelTrazo=&#39;#555&#39;;
   var colorDeFondo=&#39;#fff&#39;;
   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(&#39;load&#39;,IniciarDibujo,false);

   function IniciarDibujo(){
     /* Creamos la pizarra */
     pizarraCanvas.style.cursor=estiloDelCursor;
     contexto=pizarraCanvas.getContext(&#39;2d&#39;);
     contexto.fillStyle=colorDeFondo;
     contexto.fillRect(0,0,anchoCanvas,altoCanvas);
     contexto.strokeStyle=colorDelTrazo;
     contexto.lineWidth=grosorDelTrazo;
     contexto.lineJoin=&#39;round&#39;;
     contexto.lineCap=&#39;round&#39;;
     /* Capturamos los diferentes eventos */
     pizarraCanvas.addEventListener(&#39;mousedown&#39;,MouseDown,false);// Click pc
     pizarraCanvas.addEventListener(&#39;mouseup&#39;,MouseUp,false);// fin click pc
     pizarraCanvas.addEventListener(&#39;mousemove&#39;,MouseMove,false);// arrastrar pc

     pizarraCanvas.addEventListener(&#39;touchstart&#39;,TouchStart,false);// tocar pantalla tactil
     pizarraCanvas.addEventListener(&#39;touchmove&#39;,TouchMove,false);// arrastras pantalla tactil
     pizarraCanvas.addEventListener(&#39;touchend&#39;,TouchEnd,false);// fin tocar pantalla dentro de la pizarra
     pizarraCanvas.addEventListener(&#39;touchleave&#39;,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(&#39;2d&#39;);
     contexto.fillStyle=colorDeFondo;
     contexto.fillRect(0,0,anchoCanvas,altoCanvas);
   }

   /* Enviar el trazado */
   function GuardarTrazado(){
     imagen.value=document.getElementById(idCanvas).toDataURL(&#39;image/png&#39;);
     document.forms[idForm].submit();
   }
&lt;/script&gt;


&lt;?php 
// comprovamos si se envió la imagen
if (isset($_POST[&#39;imagen&#39;])) { 

   // mostrar la imagen
   echo &#39;&lt;img src=&#34;&#39;.$_POST[&#39;imagen&#39;].&#39;&#34; border=&#34;1&#34;&gt;&#39;;

   // 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(&#39;#^data:image/\w+;base64,#i&#39;, &#39;&#39;, $base64));
       // definimos la ruta donde se guardara en el server
       $path= $_SERVER[&#39;DOCUMENT_ROOT&#39;].&#39;/firmas/&#39;.$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[&#39;imagen&#39;], &#39;mi_imagen_&#39;.date(&#39;d_m_Y_H_i_s&#39;).&#39;.png&#39; );
}
?&gt;
&lt;/body&gt;
&lt;/html&gt;

Nathenn Sanchez

@nathennsanchez941

Guardar imagen de un Canvas HTML5

Buenas tardes comunidad. Nuevamente necesito de su ayuda.

Tengo un formulario con varios inputs (nombres, apellidos, etc) y tengo un canvas donde se realizan una serie de trazos (por ejemplo pudiera ser una firma) y necesito subir esa imagen a una carpeta del servidor apache. He buscado en internet y no consigo un método efectivo para esto. Lo máximo que he logrado es convertir esos trazos en una imagen base64 pero si guardo eso en un campo de mi base de datos me va a ocupar mucho espacio y no es lo que quiero.

La pregunta especifica es: Como puedo guardar directamente en una carpeta del servidor apache (ejemplo "public/imagenes/imagen01.png") la imagen del canvas y en la base de datos solo la ruta de esa imagen.

Gracias de antemano, saludos.

1:50 p. m. · 28 mar. 2019

Nathenn Sanchez @nathennsanchez94128 mar

Buenas tardes comunidad.

Al fin después de tanto buscar di con la solución. La posteo acá abajo para futuras referencias.

Gracias...

&lt;html lang=&#34;es&#34;&gt;
&lt;head&gt;
   &lt;meta charset=&#34;UTF-8&#34; /&gt;
   &lt;meta name=&#34;viewport&#34; content=&#34;width=device-width, initial-scale=1&#34;&gt;
   &lt;title&gt;Ejemplo canvas mano alzada&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;!-- creamos el camvas --&gt;
&lt;canvas id=&#39;canvas&#39; width=&#34;200&#34; height=&#34;200&#34; style=&#39;border: 1px solid #CCC;&#39;&gt;
   &lt;p&gt;Tu navegador no soporta canvas&lt;/p&gt;
&lt;/canvas&gt;

&lt;!-- creamos el form para el envio --&gt;
&lt;form id=&#39;formCanvas&#39; method=&#39;post&#39; action=&#39;#&#39; ENCTYPE=&#39;multipart/form-data&#39;&gt;
   &lt;button type=&#39;button&#39; onclick=&#39;LimpiarTrazado()&#39;&gt;Borrar&lt;/button&gt;
   &lt;button type=&#39;button&#39; onclick=&#39;GuardarTrazado()&#39;&gt;Guardar&lt;/button&gt;
   &lt;input type=&#39;hidden&#39; name=&#39;imagen&#39; id=&#39;imagen&#39; /&gt;
&lt;/form&gt;

&lt;script type=&#34;text/javascript&#34;&gt;
   /* Variables de Configuracion */
   var idCanvas=&#39;canvas&#39;;
   var idForm=&#39;formCanvas&#39;;
   var inputImagen=&#39;imagen&#39;;
   var estiloDelCursor=&#39;crosshair&#39;;
   var colorDelTrazo=&#39;#555&#39;;
   var colorDeFondo=&#39;#fff&#39;;
   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(&#39;load&#39;,IniciarDibujo,false);

   function IniciarDibujo(){
     /* Creamos la pizarra */
     pizarraCanvas.style.cursor=estiloDelCursor;
     contexto=pizarraCanvas.getContext(&#39;2d&#39;);
     contexto.fillStyle=colorDeFondo;
     contexto.fillRect(0,0,anchoCanvas,altoCanvas);
     contexto.strokeStyle=colorDelTrazo;
     contexto.lineWidth=grosorDelTrazo;
     contexto.lineJoin=&#39;round&#39;;
     contexto.lineCap=&#39;round&#39;;
     /* Capturamos los diferentes eventos */
     pizarraCanvas.addEventListener(&#39;mousedown&#39;,MouseDown,false);// Click pc
     pizarraCanvas.addEventListener(&#39;mouseup&#39;,MouseUp,false);// fin click pc
     pizarraCanvas.addEventListener(&#39;mousemove&#39;,MouseMove,false);// arrastrar pc

     pizarraCanvas.addEventListener(&#39;touchstart&#39;,TouchStart,false);// tocar pantalla tactil
     pizarraCanvas.addEventListener(&#39;touchmove&#39;,TouchMove,false);// arrastras pantalla tactil
     pizarraCanvas.addEventListener(&#39;touchend&#39;,TouchEnd,false);// fin tocar pantalla dentro de la pizarra
     pizarraCanvas.addEventListener(&#39;touchleave&#39;,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(&#39;2d&#39;);
     contexto.fillStyle=colorDeFondo;
     contexto.fillRect(0,0,anchoCanvas,altoCanvas);
   }

   /* Enviar el trazado */
   function GuardarTrazado(){
     imagen.value=document.getElementById(idCanvas).toDataURL(&#39;image/png&#39;);
     document.forms[idForm].submit();
   }
&lt;/script&gt;


&lt;?php 
// comprovamos si se envió la imagen
if (isset($_POST[&#39;imagen&#39;])) { 

   // mostrar la imagen
   echo &#39;&lt;img src=&#34;&#39;.$_POST[&#39;imagen&#39;].&#39;&#34; border=&#34;1&#34;&gt;&#39;;

   // 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(&#39;#^data:image/\w+;base64,#i&#39;, &#39;&#39;, $base64));
       // definimos la ruta donde se guardara en el server
       $path= $_SERVER[&#39;DOCUMENT_ROOT&#39;].&#39;/firmas/&#39;.$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[&#39;imagen&#39;], &#39;mi_imagen_&#39;.date(&#39;d_m_Y_H_i_s&#39;).&#39;.png&#39; );
}
?&gt;
&lt;/body&gt;
&lt;/html&gt;

Nathenn Sanchez @nathennsanchez94128 mar

Buenas tardes comunidad.

Al fin después de tanto buscar di con la solución. La posteo acá abajo para futuras referencias.

Gracias...

&lt;html lang=&#34;es&#34;&gt;
&lt;head&gt;
   &lt;meta charset=&#34;UTF-8&#34; /&gt;
   &lt;meta name=&#34;viewport&#34; content=&#34;width=device-width, initial-scale=1&#34;&gt;
   &lt;title&gt;Ejemplo canvas mano alzada&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;!-- creamos el camvas --&gt;
&lt;canvas id=&#39;canvas&#39; width=&#34;200&#34; height=&#34;200&#34; style=&#39;border: 1px solid #CCC;&#39;&gt;
   &lt;p&gt;Tu navegador no soporta canvas&lt;/p&gt;
&lt;/canvas&gt;

&lt;!-- creamos el form para el envio --&gt;
&lt;form id=&#39;formCanvas&#39; method=&#39;post&#39; action=&#39;#&#39; ENCTYPE=&#39;multipart/form-data&#39;&gt;
   &lt;button type=&#39;button&#39; onclick=&#39;LimpiarTrazado()&#39;&gt;Borrar&lt;/button&gt;
   &lt;button type=&#39;button&#39; onclick=&#39;GuardarTrazado()&#39;&gt;Guardar&lt;/button&gt;
   &lt;input type=&#39;hidden&#39; name=&#39;imagen&#39; id=&#39;imagen&#39; /&gt;
&lt;/form&gt;

&lt;script type=&#34;text/javascript&#34;&gt;
   /* Variables de Configuracion */
   var idCanvas=&#39;canvas&#39;;
   var idForm=&#39;formCanvas&#39;;
   var inputImagen=&#39;imagen&#39;;
   var estiloDelCursor=&#39;crosshair&#39;;
   var colorDelTrazo=&#39;#555&#39;;
   var colorDeFondo=&#39;#fff&#39;;
   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(&#39;load&#39;,IniciarDibujo,false);

   function IniciarDibujo(){
     /* Creamos la pizarra */
     pizarraCanvas.style.cursor=estiloDelCursor;
     contexto=pizarraCanvas.getContext(&#39;2d&#39;);
     contexto.fillStyle=colorDeFondo;
     contexto.fillRect(0,0,anchoCanvas,altoCanvas);
     contexto.strokeStyle=colorDelTrazo;
     contexto.lineWidth=grosorDelTrazo;
     contexto.lineJoin=&#39;round&#39;;
     contexto.lineCap=&#39;round&#39;;
     /* Capturamos los diferentes eventos */
     pizarraCanvas.addEventListener(&#39;mousedown&#39;,MouseDown,false);// Click pc
     pizarraCanvas.addEventListener(&#39;mouseup&#39;,MouseUp,false);// fin click pc
     pizarraCanvas.addEventListener(&#39;mousemove&#39;,MouseMove,false);// arrastrar pc

     pizarraCanvas.addEventListener(&#39;touchstart&#39;,TouchStart,false);// tocar pantalla tactil
     pizarraCanvas.addEventListener(&#39;touchmove&#39;,TouchMove,false);// arrastras pantalla tactil
     pizarraCanvas.addEventListener(&#39;touchend&#39;,TouchEnd,false);// fin tocar pantalla dentro de la pizarra
     pizarraCanvas.addEventListener(&#39;touchleave&#39;,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(&#39;2d&#39;);
     contexto.fillStyle=colorDeFondo;
     contexto.fillRect(0,0,anchoCanvas,altoCanvas);
   }

   /* Enviar el trazado */
   function GuardarTrazado(){
     imagen.value=document.getElementById(idCanvas).toDataURL(&#39;image/png&#39;);
     document.forms[idForm].submit();
   }
&lt;/script&gt;


&lt;?php 
// comprovamos si se envió la imagen
if (isset($_POST[&#39;imagen&#39;])) { 

   // mostrar la imagen
   echo &#39;&lt;img src=&#34;&#39;.$_POST[&#39;imagen&#39;].&#39;&#34; border=&#34;1&#34;&gt;&#39;;

   // 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(&#39;#^data:image/\w+;base64,#i&#39;, &#39;&#39;, $base64));
       // definimos la ruta donde se guardara en el server
       $path= $_SERVER[&#39;DOCUMENT_ROOT&#39;].&#39;/firmas/&#39;.$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[&#39;imagen&#39;], &#39;mi_imagen_&#39;.date(&#39;d_m_Y_H_i_s&#39;).&#39;.png&#39; );
}
?&gt;
&lt;/body&gt;
&lt;/html&gt;

Nathenn Sanchez @nathennsanchez94128 mar

Buenas tardes comunidad.

Al fin después de tanto buscar di con la solución. La posteo acá abajo para futuras referencias.

Gracias...

&lt;html lang=&#34;es&#34;&gt;
&lt;head&gt;
   &lt;meta charset=&#34;UTF-8&#34; /&gt;
   &lt;meta name=&#34;viewport&#34; content=&#34;width=device-width, initial-scale=1&#34;&gt;
   &lt;title&gt;Ejemplo canvas mano alzada&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;!-- creamos el camvas --&gt;
&lt;canvas id=&#39;canvas&#39; width=&#34;200&#34; height=&#34;200&#34; style=&#39;border: 1px solid #CCC;&#39;&gt;
   &lt;p&gt;Tu navegador no soporta canvas&lt;/p&gt;
&lt;/canvas&gt;

&lt;!-- creamos el form para el envio --&gt;
&lt;form id=&#39;formCanvas&#39; method=&#39;post&#39; action=&#39;#&#39; ENCTYPE=&#39;multipart/form-data&#39;&gt;
   &lt;button type=&#39;button&#39; onclick=&#39;LimpiarTrazado()&#39;&gt;Borrar&lt;/button&gt;
   &lt;button type=&#39;button&#39; onclick=&#39;GuardarTrazado()&#39;&gt;Guardar&lt;/button&gt;
   &lt;input type=&#39;hidden&#39; name=&#39;imagen&#39; id=&#39;imagen&#39; /&gt;
&lt;/form&gt;

&lt;script type=&#34;text/javascript&#34;&gt;
   /* Variables de Configuracion */
   var idCanvas=&#39;canvas&#39;;
   var idForm=&#39;formCanvas&#39;;
   var inputImagen=&#39;imagen&#39;;
   var estiloDelCursor=&#39;crosshair&#39;;
   var colorDelTrazo=&#39;#555&#39;;
   var colorDeFondo=&#39;#fff&#39;;
   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(&#39;load&#39;,IniciarDibujo,false);

   function IniciarDibujo(){
     /* Creamos la pizarra */
     pizarraCanvas.style.cursor=estiloDelCursor;
     contexto=pizarraCanvas.getContext(&#39;2d&#39;);
     contexto.fillStyle=colorDeFondo;
     contexto.fillRect(0,0,anchoCanvas,altoCanvas);
     contexto.strokeStyle=colorDelTrazo;
     contexto.lineWidth=grosorDelTrazo;
     contexto.lineJoin=&#39;round&#39;;
     contexto.lineCap=&#39;round&#39;;
     /* Capturamos los diferentes eventos */
     pizarraCanvas.addEventListener(&#39;mousedown&#39;,MouseDown,false);// Click pc
     pizarraCanvas.addEventListener(&#39;mouseup&#39;,MouseUp,false);// fin click pc
     pizarraCanvas.addEventListener(&#39;mousemove&#39;,MouseMove,false);// arrastrar pc

     pizarraCanvas.addEventListener(&#39;touchstart&#39;,TouchStart,false);// tocar pantalla tactil
     pizarraCanvas.addEventListener(&#39;touchmove&#39;,TouchMove,false);// arrastras pantalla tactil
     pizarraCanvas.addEventListener(&#39;touchend&#39;,TouchEnd,false);// fin tocar pantalla dentro de la pizarra
     pizarraCanvas.addEventListener(&#39;touchleave&#39;,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(&#39;2d&#39;);
     contexto.fillStyle=colorDeFondo;
     contexto.fillRect(0,0,anchoCanvas,altoCanvas);
   }

   /* Enviar el trazado */
   function GuardarTrazado(){
     imagen.value=document.getElementById(idCanvas).toDataURL(&#39;image/png&#39;);
     document.forms[idForm].submit();
   }
&lt;/script&gt;


&lt;?php 
// comprovamos si se envió la imagen
if (isset($_POST[&#39;imagen&#39;])) { 

   // mostrar la imagen
   echo &#39;&lt;img src=&#34;&#39;.$_POST[&#39;imagen&#39;].&#39;&#34; border=&#34;1&#34;&gt;&#39;;

   // 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(&#39;#^data:image/\w+;base64,#i&#39;, &#39;&#39;, $base64));
       // definimos la ruta donde se guardara en el server
       $path= $_SERVER[&#39;DOCUMENT_ROOT&#39;].&#39;/firmas/&#39;.$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[&#39;imagen&#39;], &#39;mi_imagen_&#39;.date(&#39;d_m_Y_H_i_s&#39;).&#39;.png&#39; );
}
?&gt;
&lt;/body&gt;
&lt;/html&gt;

Nathenn Sanchez @nathennsanchez94128 mar

Buenas tardes comunidad.

Al fin después de tanto buscar di con la solución. La posteo acá abajo para futuras referencias.

Gracias...

&lt;html lang=&#34;es&#34;&gt;
&lt;head&gt;
   &lt;meta charset=&#34;UTF-8&#34; /&gt;
   &lt;meta name=&#34;viewport&#34; content=&#34;width=device-width, initial-scale=1&#34;&gt;
   &lt;title&gt;Ejemplo canvas mano alzada&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;!-- creamos el camvas --&gt;
&lt;canvas id=&#39;canvas&#39; width=&#34;200&#34; height=&#34;200&#34; style=&#39;border: 1px solid #CCC;&#39;&gt;
   &lt;p&gt;Tu navegador no soporta canvas&lt;/p&gt;
&lt;/canvas&gt;

&lt;!-- creamos el form para el envio --&gt;
&lt;form id=&#39;formCanvas&#39; method=&#39;post&#39; action=&#39;#&#39; ENCTYPE=&#39;multipart/form-data&#39;&gt;
   &lt;button type=&#39;button&#39; onclick=&#39;LimpiarTrazado()&#39;&gt;Borrar&lt;/button&gt;
   &lt;button type=&#39;button&#39; onclick=&#39;GuardarTrazado()&#39;&gt;Guardar&lt;/button&gt;
   &lt;input type=&#39;hidden&#39; name=&#39;imagen&#39; id=&#39;imagen&#39; /&gt;
&lt;/form&gt;

&lt;script type=&#34;text/javascript&#34;&gt;
   /* Variables de Configuracion */
   var idCanvas=&#39;canvas&#39;;
   var idForm=&#39;formCanvas&#39;;
   var inputImagen=&#39;imagen&#39;;
   var estiloDelCursor=&#39;crosshair&#39;;
   var colorDelTrazo=&#39;#555&#39;;
   var colorDeFondo=&#39;#fff&#39;;
   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(&#39;load&#39;,IniciarDibujo,false);

   function IniciarDibujo(){
     /* Creamos la pizarra */
     pizarraCanvas.style.cursor=estiloDelCursor;
     contexto=pizarraCanvas.getContext(&#39;2d&#39;);
     contexto.fillStyle=colorDeFondo;
     contexto.fillRect(0,0,anchoCanvas,altoCanvas);
     contexto.strokeStyle=colorDelTrazo;
     contexto.lineWidth=grosorDelTrazo;
     contexto.lineJoin=&#39;round&#39;;
     contexto.lineCap=&#39;round&#39;;
     /* Capturamos los diferentes eventos */
     pizarraCanvas.addEventListener(&#39;mousedown&#39;,MouseDown,false);// Click pc
     pizarraCanvas.addEventListener(&#39;mouseup&#39;,MouseUp,false);// fin click pc
     pizarraCanvas.addEventListener(&#39;mousemove&#39;,MouseMove,false);// arrastrar pc

     pizarraCanvas.addEventListener(&#39;touchstart&#39;,TouchStart,false);// tocar pantalla tactil
     pizarraCanvas.addEventListener(&#39;touchmove&#39;,TouchMove,false);// arrastras pantalla tactil
     pizarraCanvas.addEventListener(&#39;touchend&#39;,TouchEnd,false);// fin tocar pantalla dentro de la pizarra
     pizarraCanvas.addEventListener(&#39;touchleave&#39;,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(&#39;2d&#39;);
     contexto.fillStyle=colorDeFondo;
     contexto.fillRect(0,0,anchoCanvas,altoCanvas);
   }

   /* Enviar el trazado */
   function GuardarTrazado(){
     imagen.value=document.getElementById(idCanvas).toDataURL(&#39;image/png&#39;);
     document.forms[idForm].submit();
   }
&lt;/script&gt;


&lt;?php 
// comprovamos si se envió la imagen
if (isset($_POST[&#39;imagen&#39;])) { 

   // mostrar la imagen
   echo &#39;&lt;img src=&#34;&#39;.$_POST[&#39;imagen&#39;].&#39;&#34; border=&#34;1&#34;&gt;&#39;;

   // 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(&#39;#^data:image/\w+;base64,#i&#39;, &#39;&#39;, $base64));
       // definimos la ruta donde se guardara en el server
       $path= $_SERVER[&#39;DOCUMENT_ROOT&#39;].&#39;/firmas/&#39;.$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[&#39;imagen&#39;], &#39;mi_imagen_&#39;.date(&#39;d_m_Y_H_i_s&#39;).&#39;.png&#39; );
}
?&gt;
&lt;/body&gt;
&lt;/html&gt;

Post

Guardar imagen de un Canvas HTML5

Post

Guardar imagen de un Canvas HTML5

Post

Guardar imagen de un Canvas HTML5

Post

Guardar imagen de un Canvas HTML5

Post

Guardar imagen de un Canvas HTML5

Post

Guardar imagen de un Canvas HTML5