Question

我在php文档上有一个签名板。一切顺利，直到我点击提交。 .png正在写入服务器，但文件不可读，0kb表示没有数据。我的猜测是图像没有从画布正确发送，或者是由POST发送给我的php以便根据需要捕获并处理。任何帮助，将不胜感激。当它以任何方式来到javascript时，我不是最强的。 signature_pad.js用于启动画布的签名板，再次正常工作，app.js包含表单上的清除按钮和提交按钮的功能。我包含了app.js的代码。我编辑app.js以发送到隐藏字段，这样我就可以在php中选择png / canvas数据并将其保存到服务器并相应地处理它。在我的php中，我使用$ _POST拾取隐藏字段后使用了var_dump（），它只显示字符串（0），意思是空。我点击提交后在js中设置了一个警报，看看数据字符串是否也存在，并且确实存在。我很遗憾数据丢失的地方。

更新所以我进一步深入研究这是一个使用POST的表单的问题。 js和php元素都可以正常工作，但是一旦提交了表单，所有内容都会挂起，直到浏览器中出现连接重置错误。过去一天左右，我一直试图追踪到底发生了什么，到目前为止没有运气。

            <?php
            if (isset($_POST['GetImage'])) {

        define('UPLOAD_DIR', 'PDF_Docs/HomeownerAgreements/SigImages/');
        $img = $_POST['SaveSig'];
        $img = str_replace('data:image/png;base64,', '', $img);
        $img = str_replace(' ', '+', $img);
        $data = base64_decode($img);
        $file = UPLOAD_DIR . uniqid() . '.png';
    file_put_contents($file, $data);

             exit;
             ?>
             <html><body>
             <form id="form1" class="default-form" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']);?>" method="post">
         <input type="hidden" name="SaveSig" value="" id="SaveSig">
             <input type="hidden" name="GetImage" value="Yes" id="GetImage">
             <!-- SIGNATURE PAD : begin -->
             <div id="signature-pad" class="m-signature-pad">
             <div class="m-signature-pad--body">
             <div class="description">Sign Below</div>
             <canvas id="signature" width="750" height="150" style="border:1px solid #000000;"></canvas>
             </div>
             <div class="m-signature-pad--footer">
             <div class="form-field">
             <button type="button" class="button clear c-button" data-action="clear">Clear Signature</button></div>
             </div>                           
             <!-- SIGNATURE PAD : end -->
    <!-- SUBMIT BUTTON : begin -->
    <div class="form-field">
    <button class="submit-btn c-button" type="submit" data-label="Send Message" data-loading-label="Sending..." data-action="send-form">Submit</button>
    </div>
            <!-- SUBMIT BUTTON : end -->
    </div>
    </div>
    <p>&nbsp;</p>
    </form>
    <!-- CONTACT FORM : end -->
    <!-- SIGNATURE PAD JS : begin --> 
           <script src="SigPad/js/signature_pad.js"></script>
           <script src="SigPad/js/app.js"></script>
    <!-- SIGNATURE PAD JS : end -->
            </body></html>

app.js文件包含以下代码：

           var wrapper = document.getElementById("signature-pad");
           var clearButton = wrapper.querySelector("[data-action=clear]");
           var sendFormButton = wrapper.querySelector("[data-action=send-form]");
           var canvas = wrapper.querySelector("canvas");
           var signaturePad = new SignaturePad(canvas);

           clearButton.addEventListener("click", function (event) {
           signaturePad.clear();
           });                 

           sendFormButton.addEventListener("click", function (event) {
       if (signaturePad.isEmpty()) {
        alert("Please provide signature first.");
           } else {
           document.getElementById('SaveSig').value = canvas.toDataURL('image/png');
           document.forms["form1"].submit();
             }
           });

Answer 1

以下是修复我的问题的原因。我得出结论，我需要在发送之前从data:image/png;base64,字符串中删除dataURL()，因为所有其他文本字符串都会发送正常。使用split()删除图片编码，一切都很好。我还将字符串保存到名为＆＃34; Image＆＃34;的形式的隐藏字段中。然后使用ajax提交表单的全部内容。工作完美无瑕。

//CONVERT IMAGE TO DATA URL AND
//REMOVE data:image/png;base64, FROM STRING
var GetImage = canvas.toDataURL();
console.log(GetImage);
var pngImg = GetImage.split(',')[1]; //THIS WAS WHAT FIXED IT

//PUT DATA URL STRING IN 'IMAGE' HIDDEN FIELD
document.getElementById('Image').value = pngImg;

//Now send the HIDDEN "Image" FIELD USING AJAX

这是用于检索图像字符串并通过将其保存到服务器目录来处理它的PHP代码

$FileDate = date("m-d-Y", time());
$FileName = "Your File Name";    

$img = $_POST['Image'];

//UPLOAD DIRECTORY FOR IMAGE
$upload_dir = "Your Directory On Server Here";

$DecodedImg = base64_decode($img);

//NAME THE IMAGE
$ImgFile = $FileName . '_' . $FileDate . ".png";

//SAVE THE FILE TO THE SERVER
$success = file_put_contents($upload_dir.$ImgFile, $DecodedImg);

我希望这可以帮助某人，因为我真的很痛苦，因为这从未向我解释过，并且花了很多时间来搞清楚。快乐的编码。

Answer 2

请在项目的php.ini文件中尝试file_uploads = On。

代码看起来很好但是表单提交不是将<canvas>发布到php

2 个答案: