Ajax-код в php и javascript относительно файла изображения

Question

Я пытаюсь сохранить файл изображения через панель подписи.Я хочу, чтобы имя файла было элементом моего div.Который меняется соответственно.Вот мой кодЭто сохраняет изображение, но имя файла - 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

Замените своим назначением на var p = document.getElementById('my_class').value;

Answer 2

$("#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();
            }
        });
    }
});
});

Answer 3

Поскольку функция onrendered является обратным вызовом, она может не получить document.getElementById('my_class').innerHtml должным образом.Получите echo из $_POST['p'], чтобы убедиться, что правильное имя файла отправлено на сторону PHP.

получите document.getElementById('my_class').innerHtml перед вызовом html2canvas функции.

$("#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();
                }
            });
        }
    });
});