Pasar variables PHP a Javascript i de nuevo a PHP

[djkire]

Hola buenos dias necesitaria ayuda porque estoy desarroyando una aplicacion y necesitaria pasar una variable de tipo ID con la numeracion del informe para agregarla al nombre de la firma, el cual genera un jpg llamado firma.numeroid.jpg.

Esto sirve para realizar la firma en un documento y guardarla en una carpeta la cual se llamara firmas.

A continuacion agrego el codigo en el cual estoy trabajando.

Este seria el archivo donde por medio de un formulario le paso la variable ID al javascript.

Código HTML:

<tr><td colspan="4"><canvas id="canvas" width="350" height="200"></canvas>
    <div class="gui">
      <input type="hidden" id="color" value="#000000">
      <input type='text' name='idref' value='<?php echo "$ID_js";?>'/> 
      <p><b>CONFORME_CLIENTE:</b></p>
      <button id="bt-clear">BORRAR</button>
      <button id="bt-save">ACEPTAR</button>
    </div>
</td></tr> 

Este seria el segundo documento el cual recogo la variable, cosa que no se como recogerla. Porque lo e ententado pero cuando le agrego el texto me deja de funcionar la opcion de firma.

Código:

var tiemposcambian = tiemposcambian || {};

tiemposcambian.GuardandoPNGs = (function() {
  var mousePressed = false;
  var lastX, lastY;
  var ctx;
  

  function init() {
    // init canvas
    var canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d');
    resetCanvas();

    // button events
    document.getElementById('bt-save').onmouseup = sendToServer;
    document.getElementById('bt-clear').onmouseup = resetCanvas;

    // canvas events
    canvas.onmousedown = function(e) {
      draw(e.layerX, e.layerY);
      mousePressed = true;
    };

    canvas.onmousemove = function(e) {
      if (mousePressed) {
        draw(e.layerX, e.layerY);
      }
    };

    canvas.onmouseup = function(e) {
      mousePressed = false;
    };
    
    canvas.onmouseleave = function(e) {
      mousePressed = false;
    };
  }

  function draw(x, y) {
    if (mousePressed) {
      ctx.beginPath();
      ctx.strokeStyle = document.getElementById('color').value;
      ctx.lineWidth = 1;
      ctx.lineJoin = 'round';
      ctx.moveTo(lastX, lastY);
      ctx.lineTo(x, y);
      ctx.closePath();
      ctx.stroke();
    }
    lastX = x; lastY = y;
  }

  function sendToServer() {
    var data = canvas.toDataURL('image/jpg');
	var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
      // request complete
     
    }
    xhr.open('POST','snapshot.php',true);
    xhr.setRequestHeader('Content-Type', 'application/upload');
    xhr.send(data);
	ctx.fillStyle = '#ffffff';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
  }
  
  function resetCanvas() {
    // just repaint canvas white
    ctx.fillStyle = '#ffffff';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
  }

  return {
    'init': init
  };
  function envio_id()  
{  
var idref = document.getElementById("idref").value;  
var xhr;  
 if (window.XMLHttpRequest) { // Mozilla, Safari, ...  
    xhr = new XMLHttpRequest();  
} else if (window.ActiveXObject) { // IE 8 and older  
    xhr = new ActiveXObject("Microsoft.XMLHTTP");  
}  
var idpost = "idref=" + idref;  
     xhr.open("POST", "snapshot.php", true);   
     xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");                    
     xhr.send(idpost);    
}  

});


window.onload = function() {
  new tiemposcambian.GuardandoPNGs().init();
};

Y despues por ultimo seria el ultimo archivo donde recojo la id para añadirla al nombre del jpg que seria un php.

Código PHP:

  <?php 
echo $refidpost = $_POST['idpost']; 
  // read input stream 
    echo $data = file_get_contents("php://input"); 
     
    $filteredData=substr($data, strpos($data, ",")+1); 
    // Need to decode before saving since the data we received is already base64 encoded 
    $decodedData=base64_decode($filteredData); 
 
    // store in server 
    $fic_name = 'firma'.$refidpost.'.jpg'; 
    $fp = fopen('./firmas/'.$fic_name, 'wb'); 
    $ok = fwrite( $fp, $decodedData); 
    fclose( $fp ); 
    if($ok) 
        echo $fic_name; 
    else 
        echo "ERROR"; 
?>   

Espero que me puedan ayudar en este trabajo, muchas gracias por todo.

[matake]

Podrias empezar por aqui:

https://developer.mozilla.org/es/doc...Primeros_Pasos

https://cybmeta.com/ajax-con-json-y-...avascript-puro

Para poder entender el AJAX