How to make the signature be saved on the server in a png file

[zaszekk]

How to make the signature be saved on the server in a png file, I want to make the signature save in a png file, I need it as a photo because I'm using it to create a contrac I tried gptchat help but unfortunately it doesn't work well. And that is my "saveing code" but doesn't work properly, when I try to open a photo I get the message "the format is currently not supported or the file is corrupted"

$folderPath = "C:/xampp/htdocs/podpis/"; $image_parts = explode(";base64,", $podpis); $image_type_aux = explode("image/", $image_parts[0]); $file = $folderPath .'signature_'.$imie_nazwisko.'_'.$data1.'.png'; $image = imagecreatefromstring(base64_decode($image_parts[0])); imagepng($image, $file); imagedestroy($image);

[zaszekk]

or maybe you can help on stackoverflow https://stackoverflow.com/questions/75227188/how-to-make-the-signature-be-saved-on-the-server-in-a-png-file

[UziTech]

You can check out our documentation on how to save as png on the server.

[zaszekk]

Okay thanks i will look on this tomorrow, i'm going to sleep, goodnight!

[zaszekk]

You can check out our documentation on how to save as png on the server.

$data_uri = "data:image/png;base64,iVBORw0K..."; $encoded_image = explode(",", $data_uri)[1]; $decoded_image = base64_decode($encoded_image); file_put_contents("signature.png", $decoded_image); i add that to my code but still showing error "the format is currently not supported" but there is progress because it does not show that it is damaged

[zaszekk]

i checked correctness of coding on base64encode.org and that's the results : pngbase64iVBORw0 i don't know its good or no good

[Ranggawahyu77]

i hope this usefull, i use this in laravel

//above signature code add this in HTML

<form id="UploadForm" name="UploadForm" method="POST" action="your action" enctype="multipart/form-data">
   <div>
   @csrf
    <input type="file" name="sign_online" id="file_input" style="visibility: hidden;">
    </div>
</form>

///signaturecode

<div class="d-grid gap-2">
     <button type="submit" class="button btn btn-primary m-3" data-action="save-server">Submit</button>
</div>

//in javascript

var saveToServer = wrapper.querySelector("[data-action=save-server]");

saveToServer.addEventListener("click", function (event) {
  if (signaturePad.isEmpty()) {
    alert("Please provide a signature first.");
  } else {
    var dataURL = signaturePad.toDataURL("image/jpeg");
    var blobfile = dataURLToBlob(dataURL);
    var file = new File([blobfile], 'sign_online.jpg', {type:"image/jpeg", lastModified:new Date().getTime()});
    console.log(blobfile, file);
    var container = new DataTransfer();
    container.items.add(file);
    document.querySelector('#file_input').files = container.files;
    document.querySelector('#UploadForm').submit();
  }
});

//in my Controller

$request->sign_online->storeAs('images', 'filename.jpg');

and this will save to storage/app/images/filename.jpg --> you file name if you want in .png you can change

[zaszekk]

thanks for your answer, i will check it out, but what do you mean by "controller"

[zaszekk]

okay i know now what do you have on mind, i want to have all in one code and i don't want to making others php files i can put there my code, and maybe you can help me what i need to change to save that properly?

[zaszekk]

that's my script `

    <script> 
        var canvas = document.getElementById('signature-pad');

        function resizeCanvas(){
            var ratio=Math.max(window.devicePixelRatio||1,1);

                    canvas.width=canvas.offsetWidth * ratio;

                    canvas.height=canvas.offsetHeight * ratio;

                    canvas.getContext('2d').scale(ratio,ratio);
            }
            window.oneresize = resizeCanvas;
            resizeCanvas();

        var signaturePad= new SignaturePad(canvas,{backgroundColor:'rgb(192,192,192)'});
            document.getElementById('save-png').
            addEventListener('click',function(){
                if(signaturePad.isEmpty()){
                    return alert("Prosze wprowadź najpierw podpis.");
                }
                else{
                    var dataURL=signaturePad.toDataURL();
                }
            });
            document.getElementById('clear').
            addEventListener('click',function(){
                signaturePad.clear();
            });
        var saveToServer= wrapper.querySelector("[data-action=save-server]");

            saveToServer.addEventListener("click",function (event){
                if(signaturePad.isEmpty()){
                    return alert("Prosze wprowadź najpierw podpis.");
                }
                else{
                    var dataURL=signaturePad.toDataURL("image/png");
                    var blobfile=dataURLToBlob(dataURL);
                    var file = new File([blobfile],'podpis.png',{type:"image/png",lastModifed:new Date().geTime()});
                    console.log(blobfile,file);
                    var container = new DataTransfer();
                    container.items.add(file);
                    document.querySelector('#file_input').files=container.files;
                    document.querySelector('#UploadForm').submit();
                }
            });
    </script>
    <?
    if(isset($_POST['submit'])){
        $image = $_POST['sign_online'];
        $image = str_replace('data:image/png;base64,', '', $image);
        $image = str_replace(' ', '+', $image);
        $data = base64_decode($image);
        file_put_contents('C:/xampp/htdocs/podpis.png', $data);
        exit;

}

    ?>

`

[zaszekk]

and that's my form : i cant make that simple and together sorry

<form method="POST" action="uploadver2.php" id="UploadForm" enctype="multipart/form-data">

        <p>Wprowadź podpis</p>
            <div>
                <p>Podpis:</p>
                    <br>
                        <div id="sig">
                            <div class="wrapper">
                                <canvas id="signature-pad" class="signature-pad">
                                    <input id="file_input" type="hidden" name="sign_online">
                                        </canvas>
                                            </div>
                                                </div>
                                                    <br>
                                                        <button id="clear">
                                                          Wyczyść
                                                            </button>
                                                                <button type="submit" id ="save-png" class="submit" name="submit"  data-action="save-server">Potwierdź</button>
                                                                    </div>
    </form> 

[zaszekk]

i hope this usefull, i use this in laravel

//above signature code add this in HTML

<form id="UploadForm" name="UploadForm" method="POST" action="your action" enctype="multipart/form-data">
   <div>
   @csrf
    <input type="file" name="sign_online" id="file_input" style="visibility: hidden;">
    </div>
</form>

///signaturecode

<div class="d-grid gap-2">
     <button type="submit" class="button btn btn-primary m-3" data-action="save-server">Submit</button>
</div>

//in javascript

var saveToServer = wrapper.querySelector("[data-action=save-server]");

saveToServer.addEventListener("click", function (event) {
  if (signaturePad.isEmpty()) {
    alert("Please provide a signature first.");
  } else {
    var dataURL = signaturePad.toDataURL("image/jpeg");
    var blobfile = dataURLToBlob(dataURL);
    var file = new File([blobfile], 'sign_online.jpg', {type:"image/jpeg", lastModified:new Date().getTime()});
    console.log(blobfile, file);
    var container = new DataTransfer();
    container.items.add(file);
    document.querySelector('#file_input').files = container.files;
    document.querySelector('#UploadForm').submit();
  }
});

//in my Controller

$request->sign_online->storeAs('images', 'filename.jpg');

and this will save to storage/app/images/filename.jpg --> you file name if you want in .png you can change

i need something like that but i need saveing in the same file as the form

[zaszekk]

and i have error with wrapper Uncaught ReferenceError: wrapper is not defined

//in javascript

var saveToServer = wrapper.querySelector("[data-action=save-server]");

saveToServer.addEventListener("click", function (event) {
  if (signaturePad.isEmpty()) {
    alert("Please provide a signature first.");
  } else {
    var dataURL = signaturePad.toDataURL("image/jpeg");
    var blobfile = dataURLToBlob(dataURL);
    var file = new File([blobfile], 'sign_online.jpg', {type:"image/jpeg", lastModified:new Date().getTime()});
    console.log(blobfile, file);
    var container = new DataTransfer();
    container.items.add(file);
    document.querySelector('#file_input').files = container.files;
    document.querySelector('#UploadForm').submit();
  }
});

[zaszekk]

Please i need help

[Ranggawahyu77]

and i have error with wrapper Uncaught ReferenceError: wrapper is not defined

//in javascript

var saveToServer = wrapper.querySelector("[data-action=save-server]");

saveToServer.addEventListener("click", function (event) {
  if (signaturePad.isEmpty()) {
    alert("Please provide a signature first.");
  } else {
    var dataURL = signaturePad.toDataURL("image/jpeg");
    var blobfile = dataURLToBlob(dataURL);
    var file = new File([blobfile], 'sign_online.jpg', {type:"image/jpeg", lastModified:new Date().getTime()});
    console.log(blobfile, file);
    var container = new DataTransfer();
    container.items.add(file);
    document.querySelector('#file_input').files = container.files;
    document.querySelector('#UploadForm').submit();
  }
});

maybe in your form,, can you send your form?

[zaszekk]

and i have error with wrapper Uncaught ReferenceError: wrapper is not defined

//in javascript

var saveToServer = wrapper.querySelector("[data-action=save-server]");

saveToServer.addEventListener("click", function (event) {
  if (signaturePad.isEmpty()) {
    alert("Please provide a signature first.");
  } else {
    var dataURL = signaturePad.toDataURL("image/jpeg");
    var blobfile = dataURLToBlob(dataURL);
    var file = new File([blobfile], 'sign_online.jpg', {type:"image/jpeg", lastModified:new Date().getTime()});
    console.log(blobfile, file);
    var container = new DataTransfer();
    container.items.add(file);
    document.querySelector('#file_input').files = container.files;
    document.querySelector('#UploadForm').submit();
  }
});

maybe in your form,, can you send your form?

and that's my form : i cant make that simple and together sorry

Wprowadź podpis

Podpis:

Wyczyść Potwierdź

[zaszekk]

and i have error with wrapper Uncaught ReferenceError: wrapper is not defined

//in javascript

var saveToServer = wrapper.querySelector("[data-action=save-server]");

saveToServer.addEventListener("click", function (event) {
  if (signaturePad.isEmpty()) {
    alert("Please provide a signature first.");
  } else {
    var dataURL = signaturePad.toDataURL("image/jpeg");
    var blobfile = dataURLToBlob(dataURL);
    var file = new File([blobfile], 'sign_online.jpg', {type:"image/jpeg", lastModified:new Date().getTime()});
    console.log(blobfile, file);
    var container = new DataTransfer();
    container.items.add(file);
    document.querySelector('#file_input').files = container.files;
    document.querySelector('#UploadForm').submit();
  }
});

maybe in your form,, can you send your form?

and that's my form : i cant make that simple and together sorry

Wprowadź podpis

Podpis:

Wyczyść Potwierdź

form method="POST" action="uploadver2.php" id="UploadForm" enctype="multipart/form-data">

[zaszekk]

Any ideas?

[UziTech]

I'm going to close this as it isn't about the signature_pad software. This type of question will be answered much faster on stackoverflow.com