Проводка внутри функции

Я использую холст JS и HTML5 для захвата подписей. Человек подписывает коробку, щелкает submit, а затем отображает подпись для удовольствия. Подпись отображается в PNGURLПроводка внутри функции

Что бы я хотел сделать, когда пользователь нажимает кнопку «Отправить», а затем отправляет данные на другую страницу (я бы хотел перенаправить, а остался на той же странице, что и в AJAX). Каков наилучший способ публикации? Я попробовал несколько вариантов, но поскольку я новичок в JS, я не могу заставить POST работать правильно.

Вот мой код

HTML ХОЛСТИНЫ

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 

     <script src="todataurl.js"></script> 
     <script src="signature.js"></script> 

    </head> 
    <body> 

     <div id="canvas"> 
      <canvas class="roundCorners" id="newSignature" 
      style="position: relative; margin: 0; padding: 0; border: 1px solid #c4caac;"></canvas> 
     </div> 

     <script> 
      signatureCapture(); 
     </script> 

     <button type="button" onclick="signatureSave()"> 
      Submit 
     </button> 
     <button type="button" onclick="signatureClear()"> 
      Clear signature 
     </button> 
     </br> 
     Saved Image 
     </br> 
     <img id="saveSignature" alt="Saved image png"/> 

    </body> 
</html>

Signature.JS (функция Я хотел бы, чтобы постить это signatureSave)

function signatureCapture() { 
    var canvas = document.getElementById("newSignature"); 
    var context = canvas.getContext("2d"); 
    canvas.width = 560; 
    canvas.height = 180; 
    context.fillStyle = "#fff"; 
    context.strokeStyle = "#444"; 
    context.lineWidth = 1.5; 
    context.lineCap = "round"; 
    context.fillRect(0, 0, canvas.width, canvas.height); 
    var disableSave = true; 
    var pixels = []; 
    var cpixels = []; 
    var xyLast = {}; 
    var xyAddLast = {}; 
    var calculate = false; 
    { //functions 
     function remove_event_listeners() { 
      canvas.removeEventListener('mousemove', on_mousemove, false); 
      canvas.removeEventListener('mouseup', on_mouseup, false); 
      canvas.removeEventListener('touchmove', on_mousemove, false); 
      canvas.removeEventListener('touchend', on_mouseup, false); 

      document.body.removeEventListener('mouseup', on_mouseup, false); 
      document.body.removeEventListener('touchend', on_mouseup, false); 
     } 

     function get_coords(e) { 
      var x, y; 

      if (e.changedTouches && e.changedTouches[0]) { 
       var offsety = canvas.offsetTop || 0; 
       var offsetx = canvas.offsetLeft || 0; 

       x = e.changedTouches[0].pageX - offsetx; 
       y = e.changedTouches[0].pageY - offsety; 
      } else if (e.layerX || 0 == e.layerX) { 
       x = e.layerX; 
       y = e.layerY; 
      } else if (e.offsetX || 0 == e.offsetX) { 
       x = e.offsetX; 
       y = e.offsetY; 
      } 

      return { 
       x : x, 
       y : y 
      }; 
     }; 

     function on_mousedown(e) { 
      e.preventDefault(); 
      e.stopPropagation(); 

      canvas.addEventListener('mouseup', on_mouseup, false); 
      canvas.addEventListener('mousemove', on_mousemove, false); 
      canvas.addEventListener('touchend', on_mouseup, false); 
      canvas.addEventListener('touchmove', on_mousemove, false); 
      document.body.addEventListener('mouseup', on_mouseup, false); 
      document.body.addEventListener('touchend', on_mouseup, false); 

      empty = false; 
      var xy = get_coords(e); 
      context.beginPath(); 
      pixels.push('moveStart'); 
      context.moveTo(xy.x, xy.y); 
      pixels.push(xy.x, xy.y); 
      xyLast = xy; 
     }; 

     function on_mousemove(e, finish) { 
      e.preventDefault(); 
      e.stopPropagation(); 

      var xy = get_coords(e); 
      var xyAdd = { 
       x : (xyLast.x + xy.x)/2, 
       y : (xyLast.y + xy.y)/2 
      }; 

      if (calculate) { 
       var xLast = (xyAddLast.x + xyLast.x + xyAdd.x)/3; 
       var yLast = (xyAddLast.y + xyLast.y + xyAdd.y)/3; 
       pixels.push(xLast, yLast); 
      } else { 
       calculate = true; 
      } 

      context.quadraticCurveTo(xyLast.x, xyLast.y, xyAdd.x, xyAdd.y); 
      pixels.push(xyAdd.x, xyAdd.y); 
      context.stroke(); 
      context.beginPath(); 
      context.moveTo(xyAdd.x, xyAdd.y); 
      xyAddLast = xyAdd; 
      xyLast = xy; 

     }; 

     function on_mouseup(e) { 
      remove_event_listeners(); 
      disableSave = false; 
      context.stroke(); 
      pixels.push('e'); 
      calculate = false; 
     }; 
    } 
    canvas.addEventListener('touchstart', on_mousedown, false); 
    canvas.addEventListener('mousedown', on_mousedown, false); 
} 

function signatureSave() { 

    var canvas = document.getElementById("newSignature");// save canvas image as data url (png format by default) 
    var dataURL = canvas.toDataURL("image/png", 0.1); 
    document.getElementById("saveSignature").src = dataURL; 

     alert(dataURL); //making sure it works 

}; 

function signatureClear() { 
    var canvas = document.getElementById("newSignature"); 
    var context = canvas.getContext("2d"); 
    context.clearRect(0, 0, canvas.width, canvas.height); 
}

Обновленный код

<form id="hiddenForm" action="signatureaccepted.php" method="POST"> 
    <input type="hidden" id="hiddenDataURL" /> 
    <button type="button" onclick="signatureSave()">   Sign Out </button> 
</form>

источник

2016-10-13 Robert Dickey

Если у вас есть правильный адрес, на который отправляется POST в форме, вы можете сделать следующее.

<form id="hiddenForm" action="correct_post_url.php" method="POST"> 
    <input type="hidden" id="hiddenDataURL" name="postedDataURL" /> 
</form>

Затем, когда пользователь нажимает кнопку submit вы поместить данные в скрытом поле и отправить форму:

function signatureSave() { 

    var canvas = document.getElementById("newSignature");// save canvas image as data url (png format by default) 
    var dataURL = canvas.toDataURL("image/png", 0.1); 

    // this does not make sense anymore, 
    // you'll abandon the page shortly and not see the image displayed! 
    //document.getElementById("saveSignature").src = dataURL; 

    // alert(dataURL); //making sure it works 

    document.getElementById("hiddenDataURL").value = dataURL; // the hidden field's id 
    document.getElementById("hiddenForm").submit(); 
}

Это будет заботиться о работе и столб dataURL к correct_post_url.php.

Вы найдете данные:

$_POST['postedDataURL'] // the hidden field's name

источник

2016-10-13 21:59:41 pid

испытания Ill этого, когда я возвращаюсь домой. Это выглядит многообещающе. Будет ли кнопка отправки понимать, что я пытаюсь сделать, или мне придется ее изменить? Я новичок в js, но использовал для php, поэтому его другое мышление мне нужно обернуть. –

Я думаю, что у меня что-то не хватает. Я внес изменения, которые вы предложили, и поместил мою кнопку в скрытую форму. кнопка теперь отправляется, но ничего не происходит. Я обновлю свой код –

Проводка внутри функции

ответ

Смежные вопросы