التوقيع في صفحه Php يدعم اجهزة الجوال

Ayman Ahmad · 2 يونيو 2023

‏سلام عليكم ابحث عن طريقة عمل توقيع في صفحة Php يدعم أجهزة المحمول قد عملت واحدا ولكن لا يدعم أجهزة المحمول هذا مثال

Adnane Kadri · 2 يونيو 2023

جرب استعمال احداث اللمس في الجوال للقيام بالأمر، أحداث مثل touchstart و touchmove و touchend.

ثم باستعمال واجهة canvas في جافاسكربت قم بالاستماع الى هاته الأحداث لرسم خط في واجهة اللوحة canvas بحسب وضعية اللمس او منحاها، ثم أخيرا قم بتوليد رابط او رسم عن طريق تحويل مدخلات canvas الى مدخل URL أو صورة. مثال عملي:

<!DOCTYPE html>
<html>
<head>
  <title>توقيع لأجهزة المحمول</title>
  <style>
    #canvas {
      border: 1px solid #000;
      touch-action: none; /* تعطيل التمرير باللمس */
    }
  </style>
</head>
<body>
  <h1>توقيع لأجهزة المحمول</h1>
  
   <!-- الكانفاس الذي سنقوم بالتوقيع عليه -->
  <canvas id="canvas" width="400" height="200"></canvas>

  <!-- نموذج الإرسال لحفظ التوقيع -->
  <form method="post" action="save_signature.php">
    <input type="hidden" id="signature" name="signature" value="">
    <button type="submit">حفظ التوقيع</button>
  </form>

  <script>
    // التأكد من توفر الدعم للكانفاس في المتصفح
    if (typeof window !== 'undefined' && window.document) {
      var canvas = document.getElementById('canvas');
      var signatureInput = document.getElementById('signature');
      var ctx = canvas.getContext('2d');
      var drawing = false;
      
      // تعطيل التمرير باللمس على الكانفاس
      canvas.addEventListener('touchstart', function(event) {
        drawing = true;
        var touch = event.changedTouches[0];
        var x = touch.clientX - canvas.offsetLeft;
        var y = touch.clientY - canvas.offsetTop;
        ctx.beginPath();
        ctx.moveTo(x, y);
      });
      
      // رسم الخط أثناء حركة اللمس
      canvas.addEventListener('touchmove', function(event) {
        if (drawing) {
          var touch = event.changedTouches[0];
          var x = touch.clientX - canvas.offsetLeft;
          var y = touch.clientY - canvas.offsetTop;
          ctx.lineTo(x, y);
          ctx.stroke();
        }
      });
      
      // إنهاء الرسم عند رفع اللمس وحفظ التوقيع
      canvas.addEventListener('touchend', function(event) {
        drawing = false;
        var dataURL = canvas.toDataURL();
        signatureInput.value = dataURL;
      });
    }
  </script>
</body>
</html>

طبعا فإن هذا هو النموذج البسيط من الفكرة، يمكنك التوسع فيها أكثر.

يمكنك أيضا استعمال مكتبات جاهزة للقيام بالعملية بتفاصيل وميزات أكثر، من مثل:

التوقيع في صفحه Php يدعم اجهزة الجوال

السؤال

Ayman Ahmad

رابط هذا التعليق

شارك على الشبكات الإجتماعية

1 جواب على هذا السؤال

Recommended Posts

Adnane Kadri

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية