前端插件：`jSignature.js`

PHP插件：`FPDF+FPDI`

`index.html`代码：

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>测试PDF手写签名</title>
    <script src="https://www.jq22.com/jquery/jquery-2.1.1.js"></script>
    <script src="public/js/libs/modernizr.js"></script>
    <style>
    html,body{padding: 0;margin: 0;width: 414px;overflow: hidden}

input {
		padding: .5em;
		margin: .5em;
	}
	select {
		padding: .5em;
		margin: .5em;
	}
	
	#signatureparent {
		color:#000;
		padding:20px;
	}
	
	/*This is the div within which the signature canvas is fitted*/
	#signature {
		border: 1px solid #eee;
		background-color:#fff;
	}

/* Drawing the 'gripper' for touch-enabled devices */ 
	html.touch #content {
		float:left;
		width:92%;
	}
	html.touch #scrollgrabber {
		float:right;
		width:4%;
		margin-right:2%;
		background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAFCAAAAACh79lDAAAAAXNSR0IArs4c6QAAABJJREFUCB1jmMmQxjCT4T/DfwAPLgOXlrt3IwAAAABJRU5ErkJggg==)
	}
	html.borderradius #scrollgrabber {
		border-radius: 1em;
	}
    </style>
</head>
<body>
<div id="pdf" style="width: 414px;height: 450px;">
    <iframe src="public/PDF.js/web/viewer.html?file=/public/pdf/test.pdf" width="100%" height="99%"></iframe>
</div>
<div>
    <div id="content" style="width: 414px">
        <div id="signatureparent">
            <div>请在此手签自己的签名</div>
            <div id="signature"></div></div>
        <div style="text-align: center">
            <button id="check">同意签授</button>
        </div>
    </div>
</div>
</body>
</html>
<script type="text/javascript">
jQuery.noConflict()
</script>
<script src="public/js/libs/jSignature.min.noconflict.js"></script>
<script>
(function($){
    $(document).ready(function() {
        
        var $sigdiv = $("#signature").jSignature({'UndoButton':true})
        
        , $extraarea = $('#displayarea')
        , pubsubprefix = 'jSignature.demo.'
        
        // 提交给后端保存
        $('#check').bind('click', function(e){
            var base64 = $("#signature").jSignature("getData");
            $.ajax({
                type: 'post',
                data:{'base64':base64},
                url: "php/savePdf.php",
                success: function(data) {
                    //var array = eval('('+data+')');
                    alert(data);
                }
            });
        });
    })
})(jQuery)
</script>
```

`savePdf.php`代码：

```php
error_reporting (E_ALL);

$root = dirname(dirname(__FILE__));
require_once($root.'/vendor/fpdf/fpdf.php');
require_once($root.'/vendor/fpdi/fpdi.php');
require_once($root.'/vendor/function.php');
  
# 1、保存图片
$path = $root.'/public/data/';
$img = $_POST['base64'];// 前端将图片转base64传递过来的参数
$img = str_replace('data:image/png;base64,', '', $img);// 得将头信息删除掉
$img = str_replace(' ', '+', $img);// 再把空替换成+号
$data = base64_decode($img);// 执行base64序列号
# 生成唯一文件名
$file_name = uniqid().'.png';
$img_path  = $path.'img/'.$file_name;
# 保存到本地
$success = file_put_contents($img_path, $data);

# 2、圖片太大了等比例縮放
zipImg($img_path);

# 3、PDF合并图片成新的PDF
$file = $path.'pdf/';
$pdf_file   = $root.'/public/pdf/test.pdf';

$pdf = new FPDI();
$pageCount = $pdf->setSourceFile($pdf_file);
 
for ($pageNo = 1; $pageNo <= $pageCount; $pageNo++) 
{
    $templateId = $pdf->importPage($pageNo);
    $size = $pdf->getTemplateSize($templateId);

if ($size['w'] > $size['h']) $pdf->AddPage('L', array($size['w'], $size['h']));
    else $pdf->AddPage('P', array($size['w'], $size['h']));
	
    $pdf->useTemplate($templateId);
	
	if($pageNo==$pageCount){
        // 00表示原尺寸寫入
	    $pdf->Image($img_path, 70, 250, 0, 0);
	} 
}

$pdf->Output($file.time().'.pdf', 'F');
```

源码下载地址：[点击下载](https://blog.junphp.com/github/PHP实现PDF手签.zip "点击下载")

已有0条评论

添加新评论☺

如果认为本文对您有所帮助请赞助本站

支付宝扫一扫赞助

已有0条评论

添加新评论☺