Zeichnen in Formular

dwex

dwex

Erfahrenes Mitglied
Hallo Leute,

Ich würde gerne in einem HTML-Formular eine Art Unterschriftenfeld einfügen wo man "Reinzeichnen" kann und dieses Bild dann mit dem Formular mitgesendet wird.

Es geht darum, dass ich mir quasi als Erleichterung für meine Aussendiensttätigkeit ein Onlineformular basteln möchte in dem mein Kunde nachher meine Anwesenheit mit seiner Unterschrift bestätigt. Dann würde ich ein PDF draus machen und fertig.

Ich weis, dass dies im Zweifel keine Rechtskraft hat aber ich möchte es dennoch so machen.

Hat jemand eine Idee wie man sowas machen kann?
Bin zwar nicht fit mit Javascript jedoch ganz gut in PHP und HTML.

Vielen Dank für eure Hilfe im Voraus!
 
Ich habe mal einfach aus Spaß auch sowas gemacht, allerdings entstehen immer "Lücken":
HTML: 
<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    <script type="text/javascript">
    
    var Drawing = false;
    $("document").ready(function()
    {
      var CanvasObject = document.getElementById("canvas_signature");
      Context = CanvasObject.getContext("2d");
      Context.strokeStyle = "rgb(255, 0, 0)";
      Context.lineWidth = "1";

      $("#canvas_signature").mousedown(function(e)
      {
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        Context.moveTo(x,y);
        Drawing = true;
      });
      $("#canvas_signature").mouseup(function(e)
      {
        Drawing = false;
      });
      $("#canvas_signature").mousemove(function(e)
      {        
        if (Drawing)
        {
          var x = e.pageX - this.offsetLeft;
          var y = e.pageY - this.offsetTop;
          Context.beginPath();
          Context.moveTo(x, y);
          Context.arc(x, y, 1, 0, (Math.PI*360)/180, false);
          Context.fill();
          Context.closePath();
          
          $("#coords").text(x+"  "+y);
        }
      });
    }); 
    </script>
  </head>
  <body onload="InitSignature()">
    <span id="coords"></span><br /><br />
    <canvas width="300" height="100" style="border:1px solid black" id="canvas_signature" />
  </body>
</html>
 

Anhänge

  • test.JPG
    test.JPG
    12,4 KB · Aufrufe: 27
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück