Question

我想将此签名图像从service.php传递给service-pdf.php，但我无法这样做。我不想将签名存储到数据库中，因为它是敏感信息。我想将签名变量传递给serivce-pdf.php并将pdf作为blob存储到数据库中。但是，service-pdf.php中没有显示输出。我试图透过别人看，但我仍然不明白。我已经读过一个人用img src分割HTML但是有一个相对路径。在我的情况下，我不知道在哪里检索签名的相对路径。我试过谷歌搜索但无济于事。

我从http://www.zetakey.com/codesample-signature.php获取了捕获签名的代码，并将其保存为signature.js

这是我的文件：

signature.js

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);
}

service.php

<form id="form1" name="form1" method="post" action="service-pdf.php">
<script src="signature.js"></script>

    </p>
    <div id="canvas">
    Customer Signature: 
      <canvas class="roundCorners" id="newSignature"
        style="position: relative; margin: 0; padding: 0; border: 1px solid #c4caac;"></canvas>
    </div>

    <script>
        signatureCapture();
    </script>

    <button type="button" onClick="signatureSave()">
        Save signature
    </button>
    <button type="button" onClick="signatureClear()">
        Clear signature
    </button>
    </br>
    Saved Image
    </br>
    <img alt="Saved image png" name="saveSignature" id="saveSignature"/>
    </br>
    <input name="button" type="submit" class="LABEL myButton" id="button" value="Submit" />
</form>

服务pdf.php

$Signature = $_POST['saveSignature'];

// Include the main TCPDF library (search for installation path).
require_once('tcpdf/tcpdf.php');

// Extend the TCPDF class to create custom Header and Footer
class MYPDF extends TCPDF {
*my customised header and footer*
}

// create new PDF document
$pdf = new MYPDF(PDF_PAGE_ORIENTATION, PDF_UNIT, PDF_PAGE_FORMAT, true, 'UTF-8', false);

// add a page
$pdf->AddPage();

// create some HTML content
$html = '
Signature: '.$Signature.'
';

// output the HTML content
$pdf->writeHTML($html, true, false, true, false, '');

//Close and output PDF document
$pdf->Output('example_003.pdf', 'I');

更新：我已经读过关于通过ajax发送捕获的签名，如此处所写https://stackoverflow.com/a/17007916/4117645但是我在放置在signatureSave（）函数中时出错

将签名图像传递给TCPDF

0 个答案: