PHP+JS实现PC端+移动端PDF手写签名合并

1年前

阅读 3029

评论 0

喜欢 0

前端插件：`jSignature.js`

PHP插件：`FPDF+FPDI`

`index.html`代码：

```html

测试PDF手写签名

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;

}

jQuery.noConflict()

(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)

```

`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 "点击下载")

© 著作权归作者所有