invisio v2.0

<?php

// Header('Content-type:image/png');
// //create respurce image variable from PNG image
// $resource = imagecreatefrompng("upload/join/signature/12ff46de4e7a3cf21e453166e17f6142.png");
// //set properties to preserve transparency
// imagealphablending($resource, true);
// imagesavealpha($resource, true);
// imagecolortransparent($resource);

// imagepng($resource);

.sign-container {
        width: 60%;
        margin: auto;
    }

.sign-preview {
        width: 150px;
        height: 50px;
        border: solid 1px #CFCFCF;
        margin: 10px 5px;
    }

A:link {
        color: #0000cc;
        text-decoration: none
    }

A:visited {
        color: #0000cc;
        text-decoration: none
    }

A:hover {
        color: red;
        text-decoration: none
    }

</style>

<div align="center">
    <small>กรุณาเซ็นชื่อในช่องด้านล่าง | <a id="btnClearSign" style="color: red;">ลบลายเซ็น</a></small>
    <div id="signArea" class="border">
        <div class="typed"></div>
        <canvas class="sign-pad" id="sign-pad" width="450" height="150" onmousedown="Bruh()"></canvas>
    </div>
    <button onclick="saveSignature()">Save Signature</button>
</div>

function isCanvasBlank(canvas) {

txt_tmp = canvas.toDataURL();

//console.log(canvas.toDataURL());

}

function saveSignature() {
        var canvas = document.getElementById('sign-pad');
        var dataURL = canvas.toDataURL(); // Convert canvas content to base64 image data

// Send the data to the server using Ajax
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                alert('Signature saved successfully!');
            }
        };

xhr.open('POST', 'save_sig.php', true);
        xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        xhr.send('image=' + encodeURIComponent(dataURL));
    }
</script>