代码看起来不错，但是表单提交没有将 <canvas> 发布到 php

Question

我在 php 文档上有一个签名板。一切正常，直到我点击提交。 .png 正在写入服务器，但文件不可读，0kb 表示没有数据。我的猜测是图像没有从 canvas 正确发送，或者由 POST 发送，以便我的 php 在必要时捕获和处理。任何帮助，将不胜感激。无论如何，在javascript方面我都不是最强的。 signature_pad.js 用于将签名板启动到 canvas，后者再次正常工作，app.js 包含表单上清除按钮和提交按钮的功能。我包含了 app.js 的代码。我编辑 app.js 以将其发送到隐藏字段，这样我就可以在 php 中选择 png/canvas 数据并将其保存到服务器并进行相应处理。在我的 php 中，在用 $_POST 拾取隐藏字段后，我使用了 var_dump() 并且它只显示 string(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

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

Answer 2

这是解决我的问题的方法。我得出的结论是，我需要在发送之前从 dataURL() 字符串中删除 data:image/png;base64,，因为所有其他文本字符串都可以正常发送。使用 split() 去除图像编码，一切都很好。我还将字符串保存到名为 "Image" 的表单中的隐藏字段，然后使用 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);

我希望这对某人有帮助，因为我真的很痛苦，因为这从来没有向我解释过，导致我花了很多时间来弄清楚。编码愉快。

代码看起来不错，但是表单提交没有将 <canvas> 发布到 php

Code looks fine however form submittion is not posting <canvas> to php

javascript

php

todataurl

signaturepad