mirror of
https://github.com/24eme/signaturepdf.git
synced 2023-08-25 09:33:08 +02:00
Gestion multi pages
This commit is contained in:
parent
894688e432
commit
9b8bb7889f
14
index.php
14
index.php
@ -53,9 +53,17 @@ $f3->route('POST /@key/save',
|
||||
function($f3) {
|
||||
$key = $f3->get('PARAMS.key');
|
||||
$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'));
|
||||
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'));
|
||||
|
||||
$svgFiles = "";
|
||||
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');
|
||||
}
|
||||
|
||||
108
js/app.js
108
js/app.js
@ -8,61 +8,69 @@ pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://mozilla.github.io/pdf.js/build
|
||||
// Asynchronous download of PDF
|
||||
var loadingTask = pdfjsLib.getDocument(url);
|
||||
loadingTask.promise.then(function(pdf) {
|
||||
console.log('PDF loaded');
|
||||
|
||||
var canvasEdition = null;
|
||||
|
||||
// Fetch the first page
|
||||
var pageNumber = 1;
|
||||
pdf.getPage(pageNumber).then(function(page) {
|
||||
console.log('Page loaded');
|
||||
|
||||
var signaturePad = new SignaturePad(document.getElementById('signature-pad'), {
|
||||
backgroundColor: 'rgba(255, 255, 255, 0)',
|
||||
penColor: 'rgb(0, 0, 0)',
|
||||
minWidth: 0.75,
|
||||
maxWidth: 1.1
|
||||
});
|
||||
|
||||
var scale = 1.0;
|
||||
var viewport = page.getViewport({scale: scale});
|
||||
|
||||
var canvasPDF = document.getElementById('canvas-pdf');
|
||||
var canvasEditionHTML = document.getElementById('canvas-edition');
|
||||
// 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;
|
||||
canvasEdition = new fabric.Canvas('canvas-edition');
|
||||
|
||||
canvasEdition.on('mouse:dblclick', function(event) {
|
||||
x = event.pointer.x
|
||||
y = event.pointer.y
|
||||
var signaturePad = new SignaturePad(document.getElementById('signature-pad'), {
|
||||
backgroundColor: 'rgba(255, 255, 255, 0)',
|
||||
penColor: 'rgb(0, 0, 0)',
|
||||
minWidth: 0.75,
|
||||
maxWidth: 1.1
|
||||
});
|
||||
|
||||
var canvasEditions = [];
|
||||
|
||||
document.getElementById('save').addEventListener('click', function(event) {
|
||||
canvasEditions.forEach(function(canvasEdition, index) {
|
||||
document.getElementById('data-svg-'+index).value = canvasEdition.toSVG();
|
||||
})
|
||||
});
|
||||
|
||||
for(var pageNumber = 1; pageNumber <= pdf.numPages; pageNumber++ ) {
|
||||
pdf.getPage(pageNumber).then(function(page) {
|
||||
var scale = 1.5;
|
||||
var viewport = page.getViewport({scale: scale});
|
||||
var pageIndex = page.pageNumber - 1;
|
||||
|
||||
fabric.loadSVGFromURL(signaturePad.toDataURL("image/svg+xml"), function(objects, options) {
|
||||
options.left = x
|
||||
options.top = y
|
||||
var obj = fabric.util.groupSVGElements(objects, options);
|
||||
canvasEdition.add(obj).renderAll();
|
||||
document.getElementById('form_pdf').insertAdjacentHTML('beforeend', '<input name="svg[' + pageIndex + ']" id="data-svg-' + pageIndex + '" type="hidden" value="" />');
|
||||
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>');
|
||||
|
||||
var canvasPDF = document.getElementById('canvas-pdf-' + pageIndex);
|
||||
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) {
|
||||
document.getElementById('data-svg').value = canvasEdition.toSVG();
|
||||
});
|
||||
|
||||
var renderContext = {
|
||||
canvasContext: context,
|
||||
viewport: viewport
|
||||
};
|
||||
var renderTask = page.render(renderContext);
|
||||
renderTask.promise.then(function () {
|
||||
console.log('Page rendered');
|
||||
});
|
||||
});
|
||||
var renderContext = {
|
||||
canvasContext: context,
|
||||
viewport: viewport
|
||||
};
|
||||
var renderTask = page.render(renderContext);
|
||||
renderTask.promise.then(function () {
|
||||
console.log('Page rendered');
|
||||
});
|
||||
});
|
||||
}
|
||||
}, function (reason) {
|
||||
console.error(reason);
|
||||
});
|
||||
12
pdf.html.php
12
pdf.html.php
@ -13,18 +13,12 @@
|
||||
<body>
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-lg-10 col-md-9 col-sm-8 col-xs-6 bg-light">
|
||||
<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>
|
||||
<div id="container-pages" class="col-lg-10 col-md-9 col-sm-8 col-xs-6 bg-light text-center"></div>
|
||||
<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>
|
||||
<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>
|
||||
<form action="/<?php echo $key ?>/save" method="post">
|
||||
<input name="svg" id="data-svg" type="hidden" value="" />
|
||||
<form id="form_pdf" action="/<?php echo $key ?>/save" method="post">
|
||||
<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>
|
||||
</div>
|
||||
@ -34,7 +28,7 @@
|
||||
</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://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/signature_pad@3.0.0-beta.3/dist/signature_pad.umd.min.js"></script>
|
||||
<script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user