deblan-mirror/24eme-signaturepdf
1
0
Fork 0
mirror of https://github.com/24eme/signaturepdf synced 2024-05-29 03:52:31 +02:00
Code Activity

Gestion multi pages

Browse source
This commit is contained in:
Vincent LAURENT 2021-09-19 02:17:13 +02:00
parent 894688e432
commit 9b8bb7889f
3 changed files with 72 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
index.php
View file

@ -53,9 +53,17 @@ $f3->route('POST /@key/save',
function($f3) { function($f3) {
$key = $f3->get('PARAMS.key'); $key = $f3->get('PARAMS.key');
$svgData = $_POST['svg']; $svgData = $_POST['svg'];
file_put_contents($f3->get('UPLOADS').'/'.$key.'.svg', $svgData);
shell_exec(sprintf("rsvg-convert -f pdf -o %s %s", $f3->get('UPLOADS').'/'.$key.'.svg.pdf', $f3->get('UPLOADS').'/'.$key.'.svg')); $svgFiles = "";
shell_exec(sprintf("pdftk %s background %s output %s", $f3->get('UPLOADS').'/'.$key.'.svg.pdf', $f3->get('UPLOADS').'/'.$key.'.pdf', $f3->get('UPLOADS').'/'.$key.'_signe.pdf')); foreach($svgData as $index => $svgItem) {
$svgFile = $f3->get('UPLOADS').'/'.$key.'_'.$index.'.svg';
file_put_contents($svgFile, $svgItem);
$svgFiles .= $svgFile . " ";
}
shell_exec(sprintf("rsvg-convert -f pdf -o %s %s", $f3->get('UPLOADS').'/'.$key.'.svg.pdf', $svgFiles));
shell_exec(sprintf("pdftk %s multibackground %s output %s", $f3->get('UPLOADS').'/'.$key.'.svg.pdf', $f3->get('UPLOADS').'/'.$key.'.pdf', $f3->get('UPLOADS').'/'.$key.'_signe.pdf'));
Web::instance()->send($f3->get('UPLOADS').'/'.$key.'_signe.pdf'); Web::instance()->send($f3->get('UPLOADS').'/'.$key.'_signe.pdf');
} }

108
js/app.js
View file

@ -8,61 +8,69 @@ pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://mozilla.github.io/pdf.js/build
// Asynchronous download of PDF // Asynchronous download of PDF
var loadingTask = pdfjsLib.getDocument(url); var loadingTask = pdfjsLib.getDocument(url);
loadingTask.promise.then(function(pdf) { loadingTask.promise.then(function(pdf) {
console.log('PDF loaded');
var canvasEdition = null; var signaturePad = new SignaturePad(document.getElementById('signature-pad'), {
backgroundColor: 'rgba(255, 255, 255, 0)',
// Fetch the first page penColor: 'rgb(0, 0, 0)',
var pageNumber = 1; minWidth: 0.75,
pdf.getPage(pageNumber).then(function(page) { maxWidth: 1.1
console.log('Page loaded'); });
var signaturePad = new SignaturePad(document.getElementById('signature-pad'), { var canvasEditions = [];
backgroundColor: 'rgba(255, 255, 255, 0)',
penColor: 'rgb(0, 0, 0)', document.getElementById('save').addEventListener('click', function(event) {
minWidth: 0.75, canvasEditions.forEach(function(canvasEdition, index) {
maxWidth: 1.1 document.getElementById('data-svg-'+index).value = canvasEdition.toSVG();
}); })
});
var scale = 1.0;
var viewport = page.getViewport({scale: scale}); for(var pageNumber = 1; pageNumber <= pdf.numPages; pageNumber++ ) {
pdf.getPage(pageNumber).then(function(page) {
var canvasPDF = document.getElementById('canvas-pdf'); var scale = 1.5;
var canvasEditionHTML = document.getElementById('canvas-edition'); var viewport = page.getViewport({scale: scale});
// Prepare canvas using PDF page dimensions var pageIndex = page.pageNumber - 1;
var context = canvasPDF.getContext('2d');
canvasPDF.height = viewport.height;
canvasPDF.width = viewport.width;
canvasEditionHTML.height = viewport.height;
canvasEditionHTML.width = viewport.width;
canvasEdition = new fabric.Canvas('canvas-edition');
canvasEdition.on('mouse:dblclick', function(event) {
x = event.pointer.x
y = event.pointer.y
fabric.loadSVGFromURL(signaturePad.toDataURL("image/svg+xml"), function(objects, options) { document.getElementById('form_pdf').insertAdjacentHTML('beforeend', '<input name="svg[' + pageIndex + ']" id="data-svg-' + pageIndex + '" type="hidden" value="" />');
options.left = x document.getElementById('container-pages').insertAdjacentHTML('beforeend', '<div class="position-relative mt-2 d-inline-block"><canvas id="canvas-pdf-'+pageIndex+'" class="shadow"></canvas><div class="position-absolute top-0 start-0"><canvas id="canvas-edition-'+pageIndex+'"></canvas></div></div><div></div>');
options.top = y
var obj = fabric.util.groupSVGElements(objects, options); var canvasPDF = document.getElementById('canvas-pdf-' + pageIndex);
canvasEdition.add(obj).renderAll(); var canvasEditionHTML = document.getElementById('canvas-edition-' + pageIndex);
// Prepare canvas using PDF page dimensions
var context = canvasPDF.getContext('2d');
canvasPDF.height = viewport.height;
canvasPDF.width = viewport.width;
canvasEditionHTML.height = viewport.height;
canvasEditionHTML.width = viewport.width;
var canvasEdition = new fabric.Canvas('canvas-edition-' + pageIndex);
canvasEdition.on('mouse:dblclick', function(event) {
x = event.pointer.x
y = event.pointer.y
fabric.loadSVGFromURL(signaturePad.toDataURL("image/svg+xml"), function(objects, options) {
options.left = x - 100;
options.top = y - 75;
var obj = fabric.util.groupSVGElements(objects, options);
console.log(obj);
canvasEdition.add(obj).renderAll();
});
}); });
}); canvasEditions.push(canvasEdition);
document.getElementById('save').addEventListener('click', function(event) { var renderContext = {
document.getElementById('data-svg').value = canvasEdition.toSVG(); canvasContext: context,
}); viewport: viewport
};
var renderContext = { var renderTask = page.render(renderContext);
canvasContext: context, renderTask.promise.then(function () {
viewport: viewport console.log('Page rendered');
}; });
var renderTask = page.render(renderContext); });
renderTask.promise.then(function () { }
console.log('Page rendered');
});
});
}, function (reason) { }, function (reason) {
console.error(reason); console.error(reason);
}); });

12
pdf.html.php
View file

@ -13,18 +13,12 @@
<body> <body>
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<div class="col-lg-10 col-md-9 col-sm-8 col-xs-6 bg-light"> <div id="container-pages" class="col-lg-10 col-md-9 col-sm-8 col-xs-6 bg-light text-center"></div>
<div class="position-relative mt-2 mb-2">
<canvas id="canvas-pdf" class="position-absolute top-0 start-0 shadow"></canvas>
<canvas id="canvas-edition" class="position-absolute top-0 start-0"></canvas>
</div>
</div>
<aside class="col-lg-2 col-md-3 col-sm-4 col-xs-6 mt-2 position-fixed end-0 bg-white"> <aside class="col-lg-2 col-md-3 col-sm-4 col-xs-6 mt-2 position-fixed end-0 bg-white">
<h4><i class="bi bi-vector-pen"></i> Signature</h4> <h4><i class="bi bi-vector-pen"></i> Signature</h4>
<canvas id="signature-pad" class="border bg-light" width=200 height=150></canvas> <canvas id="signature-pad" class="border bg-light" width=200 height=150></canvas>
<p><small class="text-muted">Double-cliquez sur le PDF pour ajouter la signature</small></p> <p><small class="text-muted">Double-cliquez sur le PDF pour ajouter la signature</small></p>
<form action="/<?php echo $key ?>/save" method="post"> <form id="form_pdf" action="/<?php echo $key ?>/save" method="post">
<input name="svg" id="data-svg" type="hidden" value="" />
<div class="position-fixed bottom-0 mb-2"> <div class="position-fixed bottom-0 mb-2">
<button class="btn btn-primary" type="submit" id="save"><i class="bi bi-download"></i> Télécharger le PDF</button> <button class="btn btn-primary" type="submit" id="save"><i class="bi bi-download"></i> Télécharger le PDF</button>
</div> </div>
@ -34,7 +28,7 @@
</div> </div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script> <script src="https://mozilla.github.io/pdf.js/legacy/build/pdf.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fabric@4.4.0/dist/fabric.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/fabric@4.4.0/dist/fabric.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/signature_pad@3.0.0-beta.3/dist/signature_pad.umd.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/signature_pad@3.0.0-beta.3/dist/signature_pad.umd.min.js"></script>
<script> <script>