使用php（数据url）将签名捕获发送到pdf

我在这上面花了很长时间，却一事无成。我有一个签名捕获功能，可以在网页上显示图像：

HTML

然后，我希望我的php将此处理后的图像发布到pdf中：

function signatureCapture() {
    var canvas = document.getElementById("newSignature");
    var context = canvas.getContext("2d");
    canvas.width = 276;
    canvas.height = 180;
    context.fillStyle = "#fff";
    context.strokeStyle = "#444";
    context.lineWidth = 1.5;
    context.lineCap = "round";
    context.fillRect(0, 0, canvas.width, canvas.height);
    var disableSave = true;
    var pixels = [];
    var cpixels = [];
    var xyLast = {};
    var xyAddLast = {};
    var calculate = false;
    {   //functions
        function remove_event_listeners() {
            canvas.removeEventListener('mousemove', on_mousemove, false);
            canvas.removeEventListener('mouseup', on_mouseup, false);
            canvas.removeEventListener('touchmove', on_mousemove, false);
            canvas.removeEventListener('touchend', on_mouseup, false);

            document.body.removeEventListener('mouseup', on_mouseup, false);
            document.body.removeEventListener('touchend', on_mouseup, false);
        }

        function get_coords(e) {
            var x, y;

            if (e.changedTouches && e.changedTouches[0]) {
                var offsety = canvas.offsetTop || 0;
                var offsetx = canvas.offsetLeft || 0;

                x = e.changedTouches[0].pageX - offsetx;
                y = e.changedTouches[0].pageY - offsety;
            } else if (e.layerX || 0 == e.layerX) {
                x = e.layerX;
                y = e.layerY;
            } else if (e.offsetX || 0 == e.offsetX) {
                x = e.offsetX;
                y = e.offsetY;
            }

            return {
                x : x,
                y : y
            };
        };

        function on_mousedown(e) {
            e.preventDefault();
            e.stopPropagation();

            canvas.addEventListener('mouseup', on_mouseup, false);
            canvas.addEventListener('mousemove', on_mousemove, false);
            canvas.addEventListener('touchend', on_mouseup, false);
            canvas.addEventListener('touchmove', on_mousemove, false);
            document.body.addEventListener('mouseup', on_mouseup, false);
            document.body.addEventListener('touchend', on_mouseup, false);

            empty = false;
            var xy = get_coords(e);
            context.beginPath();
            pixels.push('moveStart');
            context.moveTo(xy.x, xy.y);
            pixels.push(xy.x, xy.y);
            xyLast = xy;
        };

        function on_mousemove(e, finish) {
            e.preventDefault();
            e.stopPropagation();

            var xy = get_coords(e);
            var xyAdd = {
                x : (xyLast.x + xy.x) / 2,
                y : (xyLast.y + xy.y) / 2
            };

            if (calculate) {
                var xLast = (xyAddLast.x + xyLast.x + xyAdd.x) / 3;
                var yLast = (xyAddLast.y + xyLast.y + xyAdd.y) / 3;
                pixels.push(xLast, yLast);
            } else {
                calculate = true;
            }

            context.quadraticCurveTo(xyLast.x, xyLast.y, xyAdd.x, xyAdd.y);
            pixels.push(xyAdd.x, xyAdd.y);
            context.stroke();
            context.beginPath();
            context.moveTo(xyAdd.x, xyAdd.y);
            xyAddLast = xyAdd;
            xyLast = xy;

        };

        function on_mouseup(e) {
            remove_event_listeners();
            disableSave = false;
            context.stroke();
            pixels.push('e');
            calculate = false;
        };
    }
    canvas.addEventListener('touchstart', on_mousedown, false);
    canvas.addEventListener('mousedown', on_mousedown, false);
}

function signatureSave() {

    var canvas = document.getElementById("newSignature");// save canvas image as data url (png format by default)
    var dataURL = canvas.toDataURL("image/png");
    document.getElementById("saveSignature").src = dataURL;

};




function signatureClear() {
    var canvas = document.getElementById("newSignature");
    var context = canvas.getContext("2d");
    context.clearRect(0, 0, canvas.width, canvas.height);
}

但是，它无法读取图像文件。有人能告诉我哪里出了问题以及如何解决这个问题吗？我现在几乎放弃了

谢谢

---

Phil

您需要将图像数据发布到服务器，并对其进行base64解码。 Javascript:

<?php
require("Forms/Resource/fpdf.php");

$pdf = new FPDF();
$pdf->AddPage();
$pdf->SetFont('Arial','',10);
$pdf->Write(7,'Signed By:');
$pdf->Ln(10);

//signature
$pdf->Image($_POST['saveSignature'],null,null,0,0,'png') ;
//publish
$pdf->output();
?>

php:

---

尝试显示此“$\u POST['saveSignature']”的内容，并查看它是否指向任何地方。我最初尝试过，但不起作用。谢谢，我将尝试一下

<?php
require("Forms/Resource/fpdf.php");

$pdf = new FPDF();
$pdf->AddPage();
$pdf->SetFont('Arial','',10);
$pdf->Write(7,'Signed By:');
$pdf->Ln(10);

//signature
$pdf->Image($_POST['saveSignature'],null,null,0,0,'png') ;
//publish
$pdf->output();
?>

function signatureSave() {

    var canvas = document.getElementById("newSignature");// save canvas image as data url (png format by default)
    var dataURL = canvas.toDataURL("image/png");
    document.getElementById("saveSignature").src = dataURL;

    //post base64 encoded image data via ajax
    var httpRequest = new XMLHttpRequest()
    httpRequest.onreadystatechange = function (data) {
        console.log('saved');
    }
    httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    httpRequest.open('POST', 'url/to/your/file.php');
    httpRequest.send('sig=' + encodeURIComponent(dataURL));
}

//FPDF requires a file on disk, so save a temp one:
$tmpname = '/tmp/' . uuid() . '.png';
file_put_contents($tmpname, base64_decode($_POST['sig']));

//your existing fpdf code here
$pdf->Image($tmpname,null,null,0,0,'png');
//the rest of your code here
//then remove temp image
unlink($tmpname);