ลายเซ็นดิจิทัลพร้อมลายน้ำ

โค้ดตัวอย่างการฝังลายน้ำในลายเซ็น


<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
      body{
        position: absolute;
        left: 50%;
        top: 0;
        transform: translate(-50%, 0);
      }
      /** #### signature-pad #### **/
      .wrapper-signature-pad {
        position: relative;
        width: 275px;
        height: 120px;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }
      .signature-pad{
        position: absolute;
        background-image: url('https://semicon.github.io/img/watermark.png');
        left: 0;
        top: 0;
        width: 100%;
        height:100%;
        background-size: cover;
        background-position: center;
      }
    </style>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <div id="signature" class="text-center">
      <span class="mt-2">Sign your name</span>
      <div class="wrapper-signature-pad image-bg">
        <canvas id="signature-pad" class="signature-pad"></canvas>
      </div>
      <div class="mt-2">
        <button type="button" class="btn btn-success mx-1 w-25" id="next">
          <i class="fa-solid fa-arrow-turn-down fa-rotate-90"></i> OK
        </button>
        <button type="button" class="btn btn-danger mx-1 w-25" id="clear">
          <i class="fa-solid fa-eraser"></i> Clear
        </button>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <!-- //CDN signature pad -->
    <script src="https://cdn.jsdelivr.net/npm/signature_pad@4.1.5/dist/signature_pad.umd.min.js"></script>
    <script>
        /** Set background and pen size */
        const canvas = document.getElementById('signature-pad');
        const signaturePad = new SignaturePad(canvas, {
            backgroundColor: 'rgba(255, 255, 255, 0)',
            penColor: 'rgb(0, 0, 0)',
        });

        /** Adjust the aspect ratio of the box and signature points to suit the pixel size of the screen. */
        function resizeCanvas() {
            const ratio = Math.max(window.devicePixelRatio || 1, 1);
            canvas.width = canvas.offsetWidth * ratio;
            canvas.height = canvas.offsetHeight * ratio;
            canvas.getContext("2d").scale(ratio, ratio);
        }
        window.addEventListener("resize", resizeCanvas);
        resizeCanvas();

        /** Clear signature */
        const cancelButton = document.getElementById('clear');
        cancelButton.addEventListener('click', function (event) {
            signaturePad.clear();
        });


        /** Download the signature image with watermark */
        const nextButton = document.getElementById('next');
        nextButton.addEventListener('click', function () {
        if (signaturePad.isEmpty()) {
            alert("Please provide a signature first.");
        } else {
            const tempCanvas = document.createElement('canvas');
            const tempContext = tempCanvas.getContext('2d');

            // ตั้งขนาด tempCanvas เท่ากับ canvas หลัก
            tempCanvas.width = canvas.width;
            tempCanvas.height = canvas.height;

            // วาดลายน้ำลงใน tempCanvas ก่อน
            const watermark = new Image();
            watermark.crossOrigin = "anonymous";
            watermark.src = 'https://semicon.github.io/img/watermark.png';
            watermark.onload = function () {
            tempContext.drawImage(watermark, 0, 0, canvas.width, canvas.height);

            // วาดเนื้อหาจาก canvas หลัก (ลายเซ็น) ลงใน tempCanvas
            tempContext.drawImage(canvas, 0, 0);

            // บันทึกภาพจาก tempCanvas
            const dataURL = tempCanvas.toDataURL();
            const link = document.createElement('a');
            link.href = dataURL;
            link.download = 'signature_with_watermark.png';
            link.click();
            };
        }
        });

    </script>
  </body>
</html>
ลายเซ็นดิจิทัลพร้อมลายน้ำ

โค้ดตัวอย่างการฝังลายน้ำในลายเซ็น

Guru Chian

ฟอร์มรายชื่อติดต่อ
