好吧，所以我有签名板运行，它的工作原理。它还在我的工作目录中创建了signature.png就好了。但是，png是空白的，它没有保存签名。
下面列出了所有文件。
第一个是表格。
<html><head>
<meta charset="utf-8">
<title>Full-Window · Signature Pad</title>
<style>
* {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
html, body {
min-height: 100%;
height: 100%;
max-width: 100%;
width: 100%;
overflow: hidden;
}
html, body, form {
margin: 0px;
}
html, form {
padding: 0px;
}
html, body, fieldset {
background: #aaa;
}
fieldset {
position: absolute;
border: 5px solid #aaa;
background: #aaa;
right: 0px;
bottom: 0px;
}
canvas {
outline: 5px solid #aaa;
background: #fff;
}
input[type=submit], input[type=reset] {
font-size: larger;
}
</style>
<link rel="stylesheet" href="assets/jquery.signaturepad.css">
<!--[if lt IE 9]><script src="../assets/flashcanvas.js"></script><![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
</head>
<body>
<form method="post" action="finaladd.php" class="sigPad">
<div class="sig sigWrapper">
<div class="typed"></div>
<canvas class="pad" width="198" height="55"></canvas>
<input type="hidden" name="output" class="output">
<fieldset>
<input type="reset" value="clear" />
<input type='submit' value='submit'/>
</fieldset>
</div>
</form>
<script src="assets/numeric-1.2.6.min.js"></script>
<script src="assets/bezier.js"></script>
<script src="jquery.signaturepad.js"></script>
<script>
(function(window) {
var $canvas,
onResize = function(event) {
$canvas.attr({
height: window.innerHeight,
width: window.innerWidth
});
};
$(document).ready(function() {
$canvas = $('canvas');
window.addEventListener('orientationchange', onResize, false);
window.addEventListener('resize', onResize, false);
onResize();
$('form').signaturePad({
drawBezierCurves: true,
variableStrokeWidth:true,
drawOnly: true,
defaultAction: 'drawIt',
validateFields: false,
lineWidth: 0,
output: null,
sigNav: null,
name: null,
submit: 'input[type=submit]',
typed: null,
clear: 'input[type=reset]',
typeIt: null,
drawIt: null,
typeItDesc: null,
drawItDesc: null
});
});
}(this));
</script>
<script src="assets/json2.min.js"></script>
</body></html>
下一个是表单发布的地方并保存到signature.png
<?php
require_once 'signature-to-image.php';
$json = $_POST['output']; // From Signature Pad
$img = sigJsonToImage($json);
imagepng($img, 'signature.png');
imagedestroy($img);
// Destroy the image in memory when complete
，最后一个是它需要的signature-to-image.php文件。
<?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 <hey@thomasjbradley.ca>
* @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(198, 55)
,'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);
}
如果有人可以帮助我。我现在已经尝试了几天，但没有成功。
我不断得到的错误是。
Warning: Invalid argument supplied for foreach() in C:\xampp\htdocs\CareMed\signature-to-image.php on line 51
我也在下面做了这个转储
$json = $_POST['output'];
var_dump($json, json_decode(stripslashes($json)));
答案 0 :(得分：0)
当我超过身体限制时，我无法将其余部分放入体内。
当我进行转储时，这就是我得到的。
string(6330) "[{"lx":369,"ly":534,"mx":369,"my":533},
{"lx":370,"ly":539,"mx":369,"my":534},
{"lx":368,"ly":547,"mx":370,"my":539},
[...snip...]
{"lx":1253,"ly":559,"mx":1251,"my":554},
{"lx":1262,"ly":562,"mx":1253,"my":559},
{"lx":1271,"ly":563,"mx":1262,"my":562},
{"lx":1279,"ly":563,"mx":1271,"my":563}]"
array(164) {
[0]=> object(stdClass)#1 (4) { ["lx"]=> int(369) ["ly"]=> int(534) ["mx"]=> int(369) ["my"]=> int(533) }
[1]=> object(stdClass)#2 (4) { ["lx"]=> int(370) ["ly"]=> int(539) ["mx"]=> int(369) ["my"]=> int(534) }
[2]=> object(stdClass)#3 (4) { ["lx"]=> int(368) ["ly"]=> int(547) ["mx"]=> int(370) ["my"]=> int(539) }
[...snip...]
[160]=> object(stdClass)#161 (4) { ["lx"]=> int(1253) ["ly"]=> int(559) ["mx"]=> int(1251) ["my"]=> int(554) }
[161]=> object(stdClass)#162 (4) { ["lx"]=> int(1262) ["ly"]=> int(562) ["mx"]=> int(1253) ["my"]=> int(559) }
[162]=> object(stdClass)#163 (4) { ["lx"]=> int(1271) ["ly"]=> int(563) ["mx"]=> int(1262) ["my"]=> int(562) }
[163]=> object(stdClass)#164 (4) { ["lx"]=> int(1279) ["ly"]=> int(563) ["mx"]=> int(1271) ["my"]=> int(563) }
}
告诉我它显然正在输出签名。