Question

我正在使用这里找到的jQuery Signare Pad，包含源代码和演示： http://www.jqueryscript.net/mobile/Simpe-Mobile-Signature-Pad-with-jQuery-Html5-Canvas.html

现在它所做的只是在点击完成后显示签名的图像。所以现在它与页面上的图像一起，当我提交表单时如何才能完成此操作。

我正在使用以下修改后的版本将我的表单提交给名为mPDF的PDF转换器：http://mpdf1.com/manual/index.php?tid=373

我现在想要的是从页面上的图像中获取它作为PDF上的图像，就像当您单击提交时它不知道将图像拉过来。

我不是最精明的PHP，因为我正在学习，我会非常感激任何帮助。

由Thanasis Grammatopoulos提供的更新代码

function fun_submit() {
if(isSign) {
    var canvas = $("#canvas").get(0);
    var imgData = canvas.toDataURL();
    //Here the code change, do not display image, sent it to the server
    $.ajax({
        type: "POST",
        url: "script.php",
        data: { 
            imgBase64: imgData
        }
    }).done(function(o){
        alert('Submited.');
    });

    closePopUp();
} else {
    alert('Please sign');
}

}

PHP：

<?php
define('UPLOAD_DIR', 'up/');
$img = $_POST['imgData'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = UPLOAD_DIR . uniqid() . '.png';
$success = file_put_contents($file, $data);
?>

仍然只在服务器上提供0kb .png文件，其中没有任何内容。我从哪里开始？

Answer 1

您只需将图像发送到服务器即可。将您的代码更改为：

function fun_submit() {
    if(isSign) {
        var canvas = $("#canvas").get(0);
        var imgData = canvas.toDataURL();
        //Here the code change, do not display image, sent it to the server
        $.ajax({
            type: "POST",
            url: "script.php",
            data: { 
                imgBase64: imgData
            }
        }).done(function(o){
            alert('Submited.');
        });

        closePopUp();
    } else {
        alert('Please sign');
    }
}

此处有更多信息：How to save a HTML5 Canvas as Image on a server

带有签名图像的jQuery Mobile表单提交

1 个答案: