我目前正在开展一个项目，要求用户在在线表单的末尾绘制签名。
我目前使用此脚本： http://keith-wood.name/signature.html
哪个很好用，输出是一个JSON对象，带有x / y坐标的数组数组，我存储在数据库中。
我需要重新生成签名服务器端，以便我可以暂时将其保存到PNG / GIF / JPEG文件中，这样我就可以将签名图像添加到PHPmailer的图像编码中（所以我可以使用它将在没有＆＃34;下载图像＆＃34;通知）的情况下随时显示。
所以我发现了另一个签名脚本，它允许我将JSON数据保存到图像中，该脚本看起来很像我使用的脚本，但该脚本使用不同的JSON数组。
这是第一个脚本的JSON输出（我在表单上使用）：
{"lines":[[[45.5,33],[45.5,34],[49.5,34],[51.5,35],[55.5,35],[81.5,35],[98.5,35],[111.5,35],[124.5,35],[129.5,35],[137.5,35],[140.5,35],[143.5,35],[147.5,35],[150.5,35],[152.5,35],[154.5,35],[155.5,35]],[[93.5,37],[93.5,38],[93.5,39],[93.5,40],[93.5,42],[93.5,43],[92.5,53],[91.5,57],[90.5,64],[90.5,69],[90.5,72],[90.5,73],[89.5,76],[88.5,77],[88.5,81],[87.5,83],[87.5,82],[87.5,81]],[[168.5,77],[170.5,77],[178.5,77],[184.5,76],[197.5,73],[208.5,71],[210.5,70],[210.5,68],[210.5,65],[210.5,64],[210.5,63],[207.5,61],[202.5,59],[200.5,58],[197.5,58],[196.5,58],[194.5,58],[193.5,58],[192.5,58],[190.5,59],[188.5,60],[186.5,62],[184.5,66],[183.5,66],[183.5,69],[183.5,71],[183.5,73],[183.5,75],[185.5,77],[186.5,79],[189.5,81],[191.5,82],[194.5,82],[200.5,82],[206.5,82],[208.5,82],[209.5,82],[210.5,82]],[[284.5,46],[281.5,45],[277.5,45],[275.5,44],[272.5,44],[269.5,44],[267.5,45],[262.5,46],[259.5,48],[257.5,48],[256.5,49],[256.5,50],[256.5,51],[258.5,54],[259.5,56],[262.5,56],[269.5,60],[277.5,63],[281.5,65],[290.5,68],[294.5,70],[294.5,71],[295.5,72],[295.5,73],[294.5,75],[293.5,76],[290.5,78],[287.5,79],[276.5,82],[271.5,82],[250.5,83],[244.5,84],[242.5,84]],[[334.5,43],[337.5,43],[348.5,43],[356.5,43],[371.5,43],[387.5,43],[398.5,43],[419.5,43],[426.5,43],[428.5,43]],[[392.5,44],[391.5,45],[390.5,46],[390.5,47],[389.5,48],[388.5,50],[387.5,51],[386.5,54],[385.5,56],[383.5,58],[382.5,59],[382.5,62],[381.5,63],[381.5,65],[381.5,66],[380.5,67],[380.5,68],[378.5,69],[378.5,70],[378.5,72],[377.5,74],[376.5,76],[375.5,79],[375.5,80],[375.5,81],[375.5,82],[375.5,83],[374.5,83],[374.5,84],[374.5,85],[373.5,85],[373.5,86],[373.5,86]]]}
这是脚本的示例JSON输出，允许我在服务器端重新生成但具有不同的JSON输出：
[
{"lx":20,"ly":34,"mx":20,"my":34},
{"lx":21,"ly":33,"mx":20,"my":34},
{"lx":22,"ly":31,"mx":21,"my":33},
{"lx":23,"ly":30,"mx":22,"my":31},
{"lx":25,"ly":27,"mx":23,"my":30},
{"lx":27,"ly":25,"mx":25,"my":27},
{"lx":29,"ly":23,"mx":27,"my":25},
{"lx":31,"ly":21,"mx":29,"my":23},
{"lx":33,"ly":19,"mx":31,"my":21},
{"lx":35,"ly":18,"mx":33,"my":19},
{"lx":35,"ly":17,"mx":35,"my":18},
{"lx":36,"ly":17,"mx":35,"my":17},
{"lx":36,"ly":17,"mx":36,"my":17},
{"lx":35,"ly":18,"mx":36,"my":17},
{"lx":34,"ly":20,"mx":35,"my":18},
{"lx":32,"ly":23,"mx":34,"my":20},
{"lx":30,"ly":26,"mx":32,"my":23},
{"lx":28,"ly":29,"mx":30,"my":26},
{"lx":26,"ly":32,"mx":28,"my":29},
{"lx":24,"ly":33,"mx":26,"my":32},
{"lx":23,"ly":35,"mx":24,"my":33},
{"lx":23,"ly":36,"mx":23,"my":35},
{"lx":23,"ly":36,"mx":23,"my":36},
{"lx":24,"ly":35,"mx":23,"my":36},
{"lx":26,"ly":34,"mx":24,"my":35},
{"lx":28,"ly":33,"mx":26,"my":34},
{"lx":30,"ly":31,"mx":28,"my":33},
{"lx":32,"ly":30,"mx":30,"my":31},
{"lx":33,"ly":29,"mx":32,"my":30},
{"lx":34,"ly":29,"mx":33,"my":29},
{"lx":34,"ly":29,"mx":34,"my":29},
{"lx":33,"ly":30,"mx":34,"my":29},
{"lx":32,"ly":31,"mx":33,"my":30},
{"lx":31,"ly":33,"mx":32,"my":31},
{"lx":30,"ly":35,"mx":31,"my":33},
{"lx":29,"ly":36,"mx":30,"my":35},
{"lx":29,"ly":37,"mx":29,"my":36},
{"lx":29,"ly":37,"mx":29,"my":37},
{"lx":31,"ly":36,"mx":29,"my":37},
{"lx":33,"ly":35,"mx":31,"my":36},
{"lx":36,"ly":34,"mx":33,"my":35},
{"lx":38,"ly":32,"mx":36,"my":34},
{"lx":40,"ly":31,"mx":38,"my":32},
{"lx":42,"ly":30,"mx":40,"my":31},
{"lx":43,"ly":30,"mx":42,"my":30},
{"lx":44,"ly":30,"mx":43,"my":30},
{"lx":44,"ly":31,"mx":44,"my":30},
{"lx":44,"ly":32,"mx":44,"my":31},
{"lx":43,"ly":33,"mx":44,"my":32},
{"lx":42,"ly":35,"mx":43,"my":33},
{"lx":41,"ly":36,"mx":42,"my":35},
{"lx":40,"ly":37,"mx":41,"my":36},
{"lx":40,"ly":37,"mx":40,"my":37},
{"lx":40,"ly":36,"mx":40,"my":37},
{"lx":41,"ly":36,"mx":40,"my":36},
{"lx":42,"ly":35,"mx":41,"my":36},
{"lx":44,"ly":33,"mx":42,"my":35},
{"lx":46,"ly":32,"mx":44,"my":33},
{"lx":47,"ly":32,"mx":46,"my":32},
{"lx":48,"ly":31,"mx":47,"my":32},
{"lx":48,"ly":31,"mx":48,"my":31},
{"lx":48,"ly":33,"mx":48,"my":31},
{"lx":47,"ly":35,"mx":48,"my":33},
{"lx":45,"ly":37,"mx":47,"my":35},
{"lx":43,"ly":39,"mx":45,"my":37},
{"lx":41,"ly":42,"mx":43,"my":39},
{"lx":39,"ly":44,"mx":41,"my":42},
{"lx":37,"ly":45,"mx":39,"my":44},
{"lx":37,"ly":46,"mx":37,"my":45},
{"lx":37,"ly":46,"mx":37,"my":46},
{"lx":37,"ly":45,"mx":37,"my":46},
{"lx":39,"ly":44,"mx":37,"my":45},
{"lx":42,"ly":42,"mx":39,"my":44},
{"lx":46,"ly":40,"mx":42,"my":42},
{"lx":49,"ly":38,"mx":46,"my":40},
{"lx":53,"ly":36,"mx":49,"my":38},
{"lx":56,"ly":35,"mx":53,"my":36},
{"lx":58,"ly":34,"mx":56,"my":35},
{"lx":59,"ly":34,"mx":58,"my":34},
{"lx":60,"ly":34,"mx":59,"my":34},
{"lx":59,"ly":35,"mx":60,"my":34},
{"lx":58,"ly":36,"mx":59,"my":35},
{"lx":57,"ly":37,"mx":58,"my":36},
{"lx":55,"ly":39,"mx":57,"my":37},
{"lx":54,"ly":40,"mx":55,"my":39},
{"lx":53,"ly":41,"mx":54,"my":40},
{"lx":53,"ly":41,"mx":53,"my":41},
{"lx":55,"ly":40,"mx":53,"my":41},
{"lx":57,"ly":38,"mx":55,"my":40},
{"lx":60,"ly":36,"mx":57,"my":38},
{"lx":63,"ly":34,"mx":60,"my":36},
{"lx":65,"ly":32,"mx":63,"my":34},
{"lx":67,"ly":31,"mx":65,"my":32},
{"lx":69,"ly":31,"mx":67,"my":31},
{"lx":69,"ly":31,"mx":69,"my":31},
{"lx":68,"ly":31,"mx":69,"my":31},
{"lx":66,"ly":33,"mx":68,"my":31},
{"lx":64,"ly":34,"mx":66,"my":33},
{"lx":62,"ly":36,"mx":64,"my":34},
{"lx":60,"ly":37,"mx":62,"my":36},
{"lx":59,"ly":38,"mx":60,"my":37},
{"lx":58,"ly":39,"mx":59,"my":38},
{"lx":58,"ly":39,"mx":58,"my":39},
{"lx":59,"ly":39,"mx":58,"my":39},
{"lx":61,"ly":38,"mx":59,"my":39},
{"lx":64,"ly":36,"mx":61,"my":38},
{"lx":66,"ly":35,"mx":64,"my":36},
{"lx":69,"ly":33,"mx":66,"my":35},
{"lx":72,"ly":32,"mx":69,"my":33},
{"lx":73,"ly":31,"mx":72,"my":32},
{"lx":74,"ly":31,"mx":73,"my":31},
{"lx":74,"ly":31,"mx":74,"my":31},
{"lx":72,"ly":31,"mx":74,"my":31},
{"lx":70,"ly":32,"mx":72,"my":31},
{"lx":68,"ly":33,"mx":70,"my":32},
{"lx":65,"ly":34,"mx":68,"my":33},
{"lx":64,"ly":36,"mx":65,"my":34},
{"lx":62,"ly":36,"mx":64,"my":36},
{"lx":61,"ly":37,"mx":62,"my":36},
{"lx":61,"ly":37,"mx":61,"my":37},
{"lx":62,"ly":37,"mx":61,"my":37},
{"lx":64,"ly":36,"mx":62,"my":37},
{"lx":68,"ly":34,"mx":66,"my":35},
{"lx":69,"ly":33,"mx":68,"my":34},
{"lx":70,"ly":33,"mx":69,"my":33},
{"lx":70,"ly":33,"mx":70,"my":33},
{"lx":70,"ly":32,"mx":70,"my":33},
{"lx":70,"ly":32,"mx":70,"my":32},
{"lx":71,"ly":32,"mx":70,"my":32},
{"lx":72,"ly":32,"mx":71,"my":32},
{"lx":74,"ly":32,"mx":72,"my":32},
{"lx":76,"ly":32,"mx":74,"my":32},
{"lx":79,"ly":33,"mx":76,"my":32},
{"lx":83,"ly":33,"mx":79,"my":33},
{"lx":87,"ly":34,"mx":83,"my":33},
{"lx":92,"ly":35,"mx":87,"my":34},
{"lx":97,"ly":36,"mx":92,"my":35},
{"lx":103,"ly":37,"mx":97,"my":36},
{"lx":110,"ly":38,"mx":103,"my":37},
{"lx":117,"ly":39,"mx":110,"my":38},
{"lx":125,"ly":39,"mx":117,"my":39},
{"lx":133,"ly":38,"mx":125,"my":39},
{"lx":140,"ly":36,"mx":133,"my":38},
{"lx":146,"ly":34,"mx":140,"my":36},
{"lx":151,"ly":32,"mx":146,"my":34},
{"lx":155,"ly":30,"mx":151,"my":32},
{"lx":157,"ly":28,"mx":155,"my":30},
{"lx":158,"ly":27,"mx":157,"my":28},
{"lx":158,"ly":27,"mx":158,"my":27}
]
这是将脚本保存为图像的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);
}
如何获得第一个使用PHP脚本的JSON输出？ 在过去的2个小时里，我一直在打破它，希望有人可以提供帮助。