我有画布和选项用户绘制。我将json的canvas数据传递给php文件,在那里我保存数据并使用传递的数据创建文档。如何从json获取绘制的签名并将其保存到文件夹? 这里输入字段为canvas:

<div class="form-group text-center" style="width: 202px; margin: 20px auto;">
    <label>Sign here: *</label>
    <input type="text" class="form-control"
           style="visibility: hidden;" id="eSignature"
           name="eSignature" data-validation="length"
           data-validation-length="min1"
           data-validation-error-msg="Please sign in the box.">
    <canvas id="signature-pad" class="signature-pad" width="200"
            height="100" style="touch-action: none;"></canvas>
    <button class="btn btn-danger clear-sign">Clear</button>
</div>

这是ajax

var signaturePad = new SignaturePad(document.getElementById('signature-pad'), {
    backgroundColor: 'rgba(0, 0, 0, 0)',
    penColor: 'rgb(89, 128, 212)',
    onEnd() {
        var val = signaturePad.toDataURL('image/png');
        $('input#eSignature').val(val).change();
    }
});
$('.clear-sign').on('click', function () {
    signaturePad.clear();
    $('input#eSignature').val('').change();
});

// This will give you the data from the canvas as base64 encoded Image
signaturePad.toDataURL('image/png');

在帖子请求中它是这样的:

step-1: {
"firstName":"ddddd",
"lastName":"sssssss",
"dateOfApp":"07-01-2019",
"eSignature":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABkCAYAAADDhn8LAAAMfUlEQVR4Xu1d3Ytd1RX//fYdNWYmJtJqv3VKpfVjEsfSUqGFGYViEVqHWsxEUlRaKJRCxoc  GJO/AN0fCj41E5fmpm24PigFOrDhBZaxZY7Tmw1iI0Qo6IkE00yic7dq6xz7pk5dz7vPffr3HPWJZCZuftr/db6sddee 29CfsYAobApgjQsDEEDIHNETCCmHUYAlsgYAQx8zAEjCBmA4ZAOgRsBkmHm9UqCAJGkIIo2sRMh4ARJB1uVqsgCBhBCqJoEzMdAkaQdLhZrYIgYAQpiKJNzHQIGEHS4Wa1CoKAEaQgijYx0yFgBEmHm9UqCAJGkIIo2sRMh4ARJB1uVqsgCBhBCqJoEzMdAkaQdLhZrYIgYAQpiKJNzHQIGEHS4Wa1CoKAEaQgijYx0yFgBEmHm9UqCAJGkIIo2sRMh4ARJB1uVqsgCBhBCqJoEzMdAkaQdLhZrYIgYAQpiKJNzHQIGEHS4Wa1CoJA7gkyHiyMAn0np4NbThZEpyZmCxHILUH2Bwt/IXAPEYnoAaHgIomKgK8L8ZIIBgg5K5TTDtwJuBMifpfAn3bs2 Vl WPCXSPwH3nQXQme8igtxmQbC/63R9ueDb66qP PB/8ddKiEf9NyST1dwo7FEi7fcAXkI/27/q7/78ClPVpHXGm3/r4sMgDvz5VYOqV/v4j k1pG 4z724Hzw3R9omWdyI8IGSdwDSCzSxh4JB5PC 2ksE3lkiAHgv MCfyzKpwAVYqs1/Ha77b7fW0LW7W9kUXVU367Msnv9Wf9xHJWf31kOhiaKqxFt1hwI0gC0GYIsp1hazetKLMRQdaQxAjSQpLkkiCKT hiCe4hIxFF/4ksiaAC8nXSvyzi oU4C8hpwu0E5ASAAXWxYtcq6WL1oe 4trWVi6Xfq2u0kYulrlKsu9jFSrpo rO6UVfg8p1EZYiQOyH4PqnuU 1nI8UJZEngngaW358Jbp9soZ0UtqncEiTWaB4W6fcHr  7Qj79KcifEbh2o9lovbulax03BbinLECRnt 5J0h6aLpX88Hg LAHfxG5TrIHkDsAfmMzN20r1zD TiDPX8LAQVvAN6ZXI0hjeLW1tBKjAv7OQYaTZFhPAPkrBPNCvlGB 3wJlc8SCKNiAowRvD1W7CpB9Dsenglue6KtQuSscSNIlxWqa46reHGEIhOAfIvgwEaLeRE5B3LWAZN/CIbKWw17/PHjj8LhyaRytU0RvDJzZOjbXRa5p7o3gnRBXfuD QkHNwJgFODKwj3hDulezQtR8ADvCXjqMvr/XK97tD84Pu6Ax7zIPkeG0bNwjSJ4a bI0Ne6IHLPdmkE6aDqxoOFgMAhJcWGs0S05jhGcGK7WWKjYWtAguBTAgwn90ZWf/avTQf7hjoocs93ZQTpoArHg NlArfXrC9EzpEoCzAHYG462Kv/p/qMH144T7I/ue6obcj/ZjrY96tUjRe0khGkg4qv7vA/rNkprdzt1plDwKeYnDlEXTO5muAuEA7APFAas5BvYwo3gjSGV0dLh1EtygiFw4DcBPDLOoDViBX7CAldpngfRCDzBCaamYk6KmTGOzOCZExBmvAIVA4C0E3BwXh4InIBxBkCbwm4J3bVou/lGODKHvLPmWBoOmMi9fRwjCAZUF9ICvqHIPKwkkLJQPJDgLMA5wQsm2vUHUUZQbqDe5hzdTWWRoHKQwDH4n0OXagDpTkjRJcUs6ZbI0iH9RDmVWH5UQB3ENBw7xzhZo8Gt852eCjWXR0IGEHqAKnZIupCEV53ykc8cIHAm7ojroeh6t38a3YMVj8dAkaQdLhtWUvdJ01tJypj0aadDOpM4cDZNBuAbRiiNVknAkaQOoHaqlhEiPPDBO L0kdEo0/zusg GgzZuYwWYNytJowgdSIfzwrA8qCeB/eyPAxxuwm5i2H2bZRTJcA84QJbU9QJbMaLGUE2UFB8 YKHjAHU2WAkuSeRqPJudArRlQVSdkDZXKiMW3yDwzOCVAHTXWsBHorOU0DXDM8hNHrO6vFZPSJrC oGrSsHxQtNkHgvQuAPMVw74G2BTAF9U7YPkQPrboEIhSJIfDgJIp8jcACayiFyLUjNoG1pAmELdGNNZACBXBNEs2cBP1INta4spD3wsYP8W4DAbl3MgBVmeAi5Iki4IcfKCAT3A/jhetw1qY zgtKsuVAZtsoMDa3nCRLeAELeFyf6JbGNF9rNHkTKkL5sKB1GoKcIEp PcEKNMt0skFsdeMMqZvEMIWU7D9FhS8ppd5knyNpU8FgP0QEheZ9w05oSbhtzObXQLouVSYLEbhNFNJfpVgJXrsEpDMdOB3uDLuNn3eccgcwQZO1GXXKmSFyC9pyFY3NukRkTr6sE2cx9SmKkIVlApoi Jy3ylDHrKcBwOk6QcPeaF 6DYAJAeMXmRh89YUcyWEL/lKV4FMASMypixwgSXciMQ4wSAFduE1yLS0wMSxPPqMUUbFhtJUg8W4hAbxRcuaFjsxkDxOQlDEzajFEwK8ywuG0hSL2zRRWXMCJlxMiwlRR4aC0jiF5G0MdP76JwYrvZIiYGgElbYxTY npA9KYJEs4WghdJfKY eeWYgFOtvHqzvn6tlCHQOAJNEaTqSh0DcM12DQnw 3retmhcBKthCLQPge3sesueDwSvTQrkkBbaqCEBzgB4ednzhT7nFxy4qO B01fOecgey5dqn2Kt5dYg0BRB9gcLv3XgI tCtdU/JHbAV97yTnZY80aGQO e7V/fliwBfB/AyfA7EZA1j87oPbWLok QCU6D ATkSYFfdOwrL/kd8xYVa42xFLGVpgjyQPDqvSW45xU4n5hFtNHNH4hZhTl69SjcENwtIhdJ7lxHEJFLJF6K/y4CIVcnLAHDt/n0sUsRXg/IF7W92nZkUe 3FcgbpHtXgLKjWxSPt213vohmX7/MTRFEu3ng8YXHnMOvIbgaxDsQ9nvgZUe9/gZnRA0XPEXIm piqWsV/99OFyt6bam0R1DRk4SD4eVtwi QuArAjQmahuTRGUo8X6Tz71zCQNlmnfqNKM8lmyZIL4MTvaEezj 6iTkqItc58t6qTGVPmSoJj9lVPr2s5ebGXmiCbARddI9ueGWoPkUQP5em65 THnye9J/q2sbcs YMr1dqG0G20NTqtUAVfRRzVICbCH4pWUWi4EEYQFACOaKfECXTYrzOsTu1eoUO68dpBGlQd0qanbgwqGspgsO6xoqCBCGBPiH49do1zkoH lDnopKoRPmAgnlz3RoEvwvFjSBtAj2 0DoiT0SkkETC60ncshKVA aEMquEseBAm5TRRLNGkCbAS1s16brp61Jr1zoCHCXkRDujfGnHXrR6RpAMaDzxfIK ZjvmwW86YFc0NJn1xByl7znbs m8sowgnce8rh6jEDT1TXUNENRE0wD8DWRFswUAFwYILCBQF6wNFzKCNAxZ5ytEoWcZ1k3PzaJpq6OKsgbCtBvHE5o1MHP4Nr3swj4pEDCCpAAtC1VqgwBxxkAYEgizBgCO1I5TXTU3ZWRpTHtGkMbw6pnSq7OOH4PIWJyfpvs2HphxKD1ja5rt1WkE2R6jXJSIbrqXUYH/McCvVBU/KSg9bUTZXMVGkFyYf2NCRImc vRD5IbpC7wCmSfd2dBJq2YClETeLvpmphGkMdvKVenVvDP5CcDvbmYM1YNvrxKyqCFnzUU7 vgtepI09x8jSO5VXJ A4S2XqIzqrj/gwwv9RDC8/mxNIl4WnRh9NTwqQCnnMfPZCFKf/RS6VPXuAd3EHIzCzNS0mXBvZu1HgMsA/qHP2pFurtdnGiNIoU0/vfBrM50T65ma wmik6Wipz7n1D3znv/605Ghv6fvubM1jSCdxTvXvendaFdi W5Nl9mMMNWggO7 vwLgvN4fAPHHspp3ZgTJtcl2V7j9wfGfE/he9Ynt8Jhz8q6C OfoMSTMwcsz00/snenuqGt7N4JkSRs5HosGAQSVSQB3x4mYSYKsXvShqTJ4D3DLgHyoRwFmDu99ulvQGEG6hXxB 43XLh6VHxCyA3A3A/jOJveqhesZDzdXgn 0G3syRpCCGmqWxA4fZ4VMObAmMrbGBYNAztDjl510w4wgWbKUgo8l3rj0Ig8S3E1Cjy HnwRZPpgOhq7vFFRGkE4hbf00jMD wwvPOlJvmFkJHYvgw kjQ9c13FjKCkaQlMBZtfYjUE3pn2B0cOxGgZz1kIN/DPa90P7eox6MIJ1C2vppCgF1v7qRdWwEaUptVjnvCPwfuHrDoUt8zIAAAAAASUVORK5CYII=",
"acceptTerms":"Yes",
"acceptAuth":"Yes"
}

我如何通过php "eSignature"捕获并将其保存为image文件夹?

分析解答

php文件中尝试此代码

$data = $jsonDecode["eSignature"];
$data = str_replace('data:image/png;base64,', '', $data);
$data = base64_decode($data);
file_put_contents($newFilePath.  "signature.png", $data);