Ajax code in php and javascript regarding an image file

Question

I am trying to save image file through signature pad. I want the name of the file to be an element from my div. Which changes accordingly. Here is my code. It is saving the image but the filename is blank(.png) .

Javascript:

$("#btnSaveSign").click(function(e){
        html2canvas([document.getElementById('sign-pad')], {
            onrendered: function (canvas) {
                var canvas_img_data = canvas.toDataURL('image/png');
                var img_data = canvas_img_data.replace(/^data:image\/(png|jpg);base64,/, "");
                var p = document.getElementById('my_class').innerHtml;
                //ajax call to save image inside folder
                $.ajax({
                    url: 'save_sign.php',
                    data: [{ img_data:img_data, p:p}],
                    type: 'post',
                    dataType: 'json',
                    success: function (response) {
                       window.location.reload();
                    }
                });
            }
        });
    });

save_sign.php:

<?php 
$result = array();
$imagedata = base64_decode($_POST['img_data']);
$filename = $_POST['p'];
//Location to where you want to created sign image
$file_name = './doc_signs/'.$filename.'.png';
file_put_contents($file_name,$imagedata);
$result['status'] = 1;
$result['file_name'] = $file_name;
echo json_encode($result);

?>

Answer 1

Due to onrendered function is a callback, it may not get the document.getElementById('my_class').innerHtml properly. Please get echo out the $_POST['p'] to make sure proper filename is sent to PHP side.

get document.getElementById('my_class').innerHtml before call html2canvas function.

$("#btnSaveSign").click(function(e){
    var p = document.getElementById('my_class').innerText;
    html2canvas([document.getElementById('sign-pad')], {
        onrendered: function (canvas) {
            var canvas_img_data = canvas.toDataURL('image/png');
            var img_data = canvas_img_data.replace(/^data:image\/(png|jpg);base64,/, "");

            // ajax call to save image inside folder
            $.ajax({
                url: 'save_sign.php',
                data: [{ img_data:img_data, p:p}],
                type: 'post',
                dataType: 'json',
                success: function (response) {
                   window.location.reload();
                }
            });
        }
    });
});

Answer 2

替换为var p = document.getElementById('my_class').value;

Answer 3

$("#btnSaveSign").click(function(e){
var p = document.getElementById('my_class').innerText;
html2canvas([document.getElementById('sign-pad')], {
    onrendered: function (canvas) {
        var canvas_img_data = canvas.toDataURL('image/png');
        var img_data = canvas_img_data.replace(/^data:image\/(png|jpg);base64,/, "");

        // ajax call to save image inside folder
        $.ajax({
            url: 'save_sign.php',
            data: [{ img_data:img_data, p:document.getElementById('my_class').innerText}],
            type: 'post',
            dataType: 'json',
            success: function (response) {
               window.location.reload();
            }
        });
    }
});
});