我用的是托马斯J。布拉德利的签名垫应用客户的签名到收据页，但他的教程是不完整的，留给你一个PHP页面的只是签名，并没有说明如何应用它在您的下一个页面。它只是停止在输出页面上，只有签名图像本身。我想应用它在一个收据的HTML页面，我已经根据产品信息，然后发送页面的截图作为电子邮件，基本上存储在我的计算机上的收据。这就是我在与它。
签名页
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=windows-1252" http-equiv="Content-Type" />
<meta name="robots" content="noindex" />
<meta name="googlebot" content="noindex" />
<meta name="googlebot-news" content="noindex" />
<title>Signature</title>
<style type="text/css">
.disclaimerific {
font-family: Arial, Helvetica, sans-serif;
}
.auto-style10 {
text-align: left;
}
</style>
<link href="assets/jquery.signaturepad.css" rel="stylesheet">
<!--[if lt IE 9]><script src="assets/flashcanvas.js"></script><![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/modernizr.custom.js"></script>
</head>
<body style="background-color: #DDDDDD">
<table align="center" cellpadding="0" cellspacing="0" style="width: 799px">
<tr>
<td>
<p style="margin-top: 0; margin-bottom: 0">
<img alt="" height="27" src="http://www.themidaslegacy.com/images2/headerml.jpg" width="800" /></p>
</td>
</tr>
<tr>
<td style="background-color: #FFFFFF">
<div style="text-align: center">
<div align="center">
<table border="0" width="100%" cellspacing="10" cellpadding="10">
<tr>
<td>
<div class="auto-style10" style="text-align:center;">
<font size="6" color="#CC0000" face="Impact">Please sign below. </font>
</div>
<p class="auto-style10" style="text-align:center;margin-bottom:0px;"><font face="Arial">***After you submit your signature it will be applied to your receipt on the next page.*** <br>
</td>
</tr>
</table>
</div>
</div>
<!-- Signature Table Box -->
<div style="width:450px; height:auto; margin: 0px auto 50px; auto; padding:20px; color:black;" >
<form method="post" action="capture_signature.php" class="sigPad">
<p class="drawItDesc">Draw your signature</p>
<div class="sig sigWrapper">
<canvas class="pad" width="400"></canvas>
<input type="hidden" name="output" class="output">
</div>
<br>
<div style="width:100%;">
<style>
</style>
<table style="width: 100%;text-align: center;">
<tr>
<td style="width: 50%;">
<div id="submit" >
<button id="btn-accept" style="width: 100%;color:white;" href="" type="submit" class="button1"><p style="font-size: 14px;">Accept Agreement.</p></button>
</div>
</td>
<td style="width: 50%;">
<div id="clear" >
<button style="width: 100%;" href="" name="clear" type="clear" class="clearButton"><p style="font-size: 14px;">Clear Signature</p></button>
</div>
</td>
</tr>
</table>
</div>
<!-- <div style="clear:both;"></div> -->
</form>
</div>
<script src="assets/flashcanvas.js"></script>
<script src="assets/jquery.signaturepad.js"></script>
<script src="assets/json2.min.js"></script>
<script src="assets/functions.js"></script>
<!-- End Signature Table Box -->
</td>
</tr>
<tr>
<td style="background-color: #dddddd">
<p style="margin-top: 0; margin-bottom: 0"> </td>
</tr>
<tr>
<td style="background-color: #dddddd; font-family:Arial, Helvetica, sans-serif; font-size:9px; color:#666">
<div align="center">
<p style="margin-top: 0; margin-bottom: 0"> <img alt="" height="36" src="../images2/contactfooter.jpg" width="557" /><br />
<br />
</div></td>
</tr>
<tr>
<td style="background-color: #dddddd; font-family:Arial, Helvetica, sans-serif; font-size:9px; color:#666"><div align="center">
<p style="margin-top: 0; margin-bottom: 0">© Copyright TML Group, LLC.<br />
</div></td>
</tr>
<tr>
<td height="2" style="background-color: #dddddd"></span></td>
</tr>
</table>
<div align="center" style="width:750px; color:#666666" >
<p style="margin-top: 0; margin-bottom: 0"></div>
<p style="margin-top: 0; margin-bottom: 0"></p>
</td>
</tr>
<tr>
<td style="text-align: center"></tr>
</td>
</tr>
<tr>
<td style="text-align: center">
<p style="margin-top: 0; margin-bottom: 0"></p>
</td>
</tr>
</table>
<script type="text/javascript" src="https://ra128.infusionsoft.com/app/webTracking/getTrackingCode?trackingId=6a323c394c72471d0866a90788baeed5"></script>
</body>
</html>图像页签名
<?php
/**
* Signature to Image: A supplemental script for Signature Pad that
* generates an image of the signature’s JSON output server-side using PHP.
*
* @project ca.thomasjbradley.applications.signaturetoimage
* @author Thomas J Bradley <[email protected]>
* @link http://thomasjbradley.ca/lab/signature-to-image
* @link http://github.com/thomasjbradley/signature-to-image
* @copyright Copyright MMXI–, Thomas J Bradley
* @license New BSD License
* @version 1.1.0
*/
/**
* Accepts a signature created by signature pad in Json format
* Converts it to an image resource
* The image resource can then be changed into png, jpg whatever PHP GD supports
*
* To create a nicely anti-aliased graphic the signature is drawn 12 times it's original size then shrunken
*
* @param string|array $json
* @param array $options OPTIONAL; the options for image creation
* imageSize => array(width, height)
* bgColour => array(red, green, blue) | transparent
* penWidth => int
* penColour => array(red, green, blue)
* drawMultiplier => int
*
* @return object
*/
function sigJsonToImage ($json, $options = array()) {
$defaultOptions = array(
'imageSize' => array(410, 155)
,'bgColour' => array(0xff, 0xff, 0xff)
,'penWidth' => 2
,'penColour' => array(0x14, 0x53, 0x94)
,'drawMultiplier'=> 12
);
$options = array_merge($defaultOptions, $options);
$img = imagecreatetruecolor($options['imageSize'][0] * $options['drawMultiplier'], $options['imageSize'][1] * $options['drawMultiplier']);
if ($options['bgColour'] == 'transparent') {
imagesavealpha($img, true);
$bg = imagecolorallocatealpha($img, 0, 0, 0, 127);
} else {
$bg = imagecolorallocate($img, $options['bgColour'][0], $options['bgColour'][1], $options['bgColour'][2]);
}
$pen = imagecolorallocate($img, $options['penColour'][0], $options['penColour'][1], $options['penColour'][2]);
imagefill($img, 0, 0, $bg);
if (is_string($json))
$json = json_decode(stripslashes($json));
foreach ($json as $v)
drawThickLine($img, $v->lx * $options['drawMultiplier'], $v->ly * $options['drawMultiplier'], $v->mx * $options['drawMultiplier'], $v->my * $options['drawMultiplier'], $pen, $options['penWidth'] * ($options['drawMultiplier'] / 2));
$imgDest = imagecreatetruecolor($options['imageSize'][0], $options['imageSize'][1]);
if ($options['bgColour'] == 'transparent') {
imagealphablending($imgDest, false);
imagesavealpha($imgDest, true);
}
imagecopyresampled($imgDest, $img, 0, 0, 0, 0, $options['imageSize'][0], $options['imageSize'][0], $options['imageSize'][0] * $options['drawMultiplier'], $options['imageSize'][0] * $options['drawMultiplier']);
imagedestroy($img);
return $imgDest;
}
/**
* Draws a thick line
* Changing the thickness of a line using imagesetthickness doesn't produce as nice of result
*
* @param object $img
* @param int $startX
* @param int $startY
* @param int $endX
* @param int $endY
* @param object $colour
* @param int $thickness
*
* @return void
*/
function drawThickLine ($img, $startX, $startY, $endX, $endY, $colour, $thickness) {
$angle = (atan2(($startY - $endY), ($endX - $startX)));
$dist_x = $thickness * (sin($angle));
$dist_y = $thickness * (cos($angle));
$p1x = ceil(($startX + $dist_x));
$p1y = ceil(($startY + $dist_y));
$p2x = ceil(($endX + $dist_x));
$p2y = ceil(($endY + $dist_y));
$p3x = ceil(($endX - $dist_x));
$p3y = ceil(($endY - $dist_y));
$p4x = ceil(($startX - $dist_x));
$p4y = ceil(($startY - $dist_y));
$array = array(0=>$p1x, $p1y, $p2x, $p2y, $p3x, $p3y, $p4x, $p4y);
imagefilledpolygon($img, $array, (count($array)/2), $colour);
}捕获图像页面的最终结果
<?php
require_once 'signature-to-image.php';
$json = $_POST['output'];
$img = sigJsonToImage($json);
imagepng($img, 'signature.png');
header('Content-Type: image/png');
imagepng($img);
imagedestroy($img);这里是起始页https://www.protml.com/tmr/sig-confirm.html
这里是结果结束的地方https://www.protml.com/tmr/capture_signature.php
1条答案
按热度按时间ldxq2e6h1#
如果你想使用一个额外的HTTP请求在目标页面中加载这个图像（也就是说，你想使用
<img src="http://hostname/somescript.php">嵌入它），那么你需要将数据传递给这个somescript.php。现在，根据用户在输入板上涂写了多少，实际上创建了多少“黑色像素”，JSON数据可能会变得相当大-可能太大而无法通过GET请求放入查询字符串。由于您不能使用POST和<img src="...">轻松加载图像，因此将其放入会话中可能是最有意义的。（在处理客户数据的场景中，我假设您可能已经在使用会话了。因此，在接收POST数据的脚本（与
/tmr/capture_signature.php不同的脚本）中，您将其放入会话中，然后在生成图像的脚本（
/tmr/capture_signature.php）中，从那里读回它（不要忘记在该脚本中再次拾取会话），然后将图像嵌入到目标页面上，
现在，如果用户在多个选项卡中打开了该脚本的多个示例，为多个收据创建签名，这可能会导致麻烦。如果这是一个现实的场景，您可以向表单添加一个随机值，将JSON数据存储到该随机键下的会话中（
$_SESSION['sigpaddata'][$_POST['randkey']] = …-您必须检查JS部分是否自动发送 all 表单数据，或者是否需要调整以提交此附加值），然后将相同的随机密钥传递给图像生成脚本（<img src="/tmr/capture_signature.php?randkey=…">），这样就可以再次从会话中获取正确的值（$_SESSION['sigpaddata'][$_GET['randkey']]）另一种不需要额外的HTTP请求的方法-因此在将必要的数据获取到图像创建代码时会少一点麻烦-是在目标页面中“内联”输出图像，使用Data URI和base64编码的图像数据。这涉及到输出缓冲来捕获
imagepng的输出（无论如何，您目前正在将图像保存到文件中，因此理论上您可以在之后立即从那里读回它-但是文件名需要唯一，每次使用signature.png用于多个客户的多个并发请求显然会导致麻烦。这可以直接用在您根据从上一页发送的表单数据生成的响应页中。由于它不需要额外的HTTP请求，POST数据在这里直接可用，并且不需要使用会话或类似的东西传递到不同的图像生成脚本。