deblan-mirror/24eme-signaturepdf
1
0
Fork 0
mirror of https://github.com/24eme/signaturepdf synced 2024-06-04 15:02:29 +02:00
Code Activity

Radiobox pour choisir quel élément ajouter

Browse source
This commit is contained in:
Vincent LAURENT 2021-09-20 09:55:42 +02:00
parent 42f29e832c
commit ea98ee5bd9
2 changed files with 35 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
js/app.js
View file

@ -13,7 +13,14 @@ loadingTask.promise.then(function(pdf) {
backgroundColor: 'rgba(255, 255, 255, 0)', backgroundColor: 'rgba(255, 255, 255, 0)',
penColor: 'rgb(0, 0, 0)', penColor: 'rgb(0, 0, 0)',
minWidth: 0.75, minWidth: 0.75,
maxWidth: 1.1 maxWidth: 1.1,
onEnd: function() {
document.getElementById('radio_signature_pad').checked = true;
}
});
document.getElementById('input-text-signature').addEventListener('keypress', function(event) {
document.getElementById('radio_signature_text').checked = true;
}); });
var svgImage = null; var svgImage = null;
@ -27,6 +34,7 @@ loadingTask.promise.then(function(pdf) {
xhr.open( 'POST', document.getElementById('form-image-upload').action, true ); xhr.open( 'POST', document.getElementById('form-image-upload').action, true );
xhr.onreadystatechange = function () { xhr.onreadystatechange = function () {
svgImage = "data:image/svg+xml;base64,"+btoa(this.responseText); svgImage = "data:image/svg+xml;base64,"+btoa(this.responseText);
document.getElementById('radio_signature_image').checked = true;
}; };
xhr.send( data ); xhr.send( data );
@ -65,14 +73,28 @@ loadingTask.promise.then(function(pdf) {
canvasEdition.on('mouse:dblclick', function(event) { canvasEdition.on('mouse:dblclick', function(event) {
x = event.pointer.x x = event.pointer.x
y = event.pointer.y y = event.pointer.y
svg2add = signaturePad.toDataURL("image/svg+xml");
if(svgImage) { var svg2add = null;
if(document.getElementById('radio_signature_pad').checked) {
svg2add = signaturePad.toDataURL("image/svg+xml");
}
if(document.getElementById('radio_signature_image').checked) {
svg2add = svgImage; svg2add = svgImage;
} }
if(svg2add) {
fabric.loadSVGFromURL(svg2add, function(objects, options) {
var svg = fabric.util.groupSVGElements(objects, options);
svg.scaleToHeight(100);
svg.top = y - (svg.getScaledHeight() / 2);
svg.left = x - (svg.getScaledWidth() / 2);
canvasEdition.add(svg).renderAll();
});
}
if(document.getElementById('input-text-signature').value) { if(document.getElementById('radio_signature_text').checked) {
var textSignature = new fabric.Text(document.getElementById('input-text-signature').value, { var textSignature = new fabric.Text(document.getElementById('input-text-signature').value, {
fontFamily: 'Caveat' fontFamily: 'Caveat'
}); });
@ -80,16 +102,6 @@ loadingTask.promise.then(function(pdf) {
textSignature.left = x - (textSignature.getScaledWidth() / 2); textSignature.left = x - (textSignature.getScaledWidth() / 2);
canvasEdition.add(textSignature).renderAll(); canvasEdition.add(textSignature).renderAll();
} }
fabric.loadSVGFromURL(svg2add, function(objects, options) {
var svg = fabric.util.groupSVGElements(objects, options);
svg.scaleToHeight(100);
svg.top = y - (svg.getScaledHeight() / 2);
svg.left = x - (svg.getScaledWidth() / 2);
canvasEdition.add(svg).renderAll();
});
}); });
canvasEditions.push(canvasEdition); canvasEditions.push(canvasEdition);

13
pdf.html.php
View file

@ -18,18 +18,21 @@
<div class="row"> <div class="row">
<div id="container-pages" class="col-lg-10 col-md-9 col-sm-8 col-xs-6 bg-light text-center"></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"> <aside class="col-lg-2 col-md-3 col-sm-4 col-xs-6 mt-2 position-fixed end-0 bg-white">
<h5><i class="bi bi-vector-pen"></i> Signature à main lever</h5> <div class="form-check form-switch float-end"><input class="form-check-input" type="radio" name="radio_signature" id="radio_signature_pad"></div>
<h5><i class="bi bi-vector-pen"></i> À main lever</h5>
<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>
<hr /> <hr />
<h5><i class="bi bi-fonts"></i> Signature texte</h5> <div class="form-check form-switch float-end"><input class="form-check-input" type="radio" name="radio_signature" id="radio_signature_text"></div>
<input id="input-text-signature" type="text" class="form-control" placeholder="Ma signature" style="font-family: 'Caveat', cursive; font-size: 24px;" /> <h5><i class="bi bi-fonts"></i> Texte</h5>
<input id="input-text-signature" type="text" class="form-control" placeholder="Ma signature" style="font-family: 'Caveat', cursive; font-size: 24px;" />
<hr /> <hr />
<div class="form-check form-switch float-end"><input class="form-check-input" type="radio" name="radio_signature" id="radio_signature_image"></div>
<h5><i class="bi bi-image"></i> Image</h5>
<form id="form-image-upload" action="/image2svg" method="POST" class="row g-3" enctype="multipart/form-data"> <form id="form-image-upload" action="/image2svg" method="POST" class="row g-3" enctype="multipart/form-data">
<h5><i class="bi bi-image"></i> Importer une image</h5>
<input id="input-image-upload" class="form-control" name="image" type="file"> <input id="input-image-upload" class="form-control" name="image" type="file">
</form> </form>
<hr /> <hr />
<p><small class="text-muted">Double-cliquez sur le PDF pour ajouter la signature</small></p> <p><small class="text-muted"><i class="bi bi-hand-index"></i><i class="bi bi-hand-index"></i> Double-cliquer sur le PDF pour <i class="bi bi-plus-circle-fill"></i> ajouter la signature</small></p>
<form id="form_pdf" action="/<?php echo $key ?>/save" method="post"> <form id="form_pdf" action="/<?php echo $key ?>/save" method="post">
<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 Signé</button> <button class="btn btn-primary" type="submit" id="save"><i class="bi bi-download"></i> Télécharger le PDF Signé</button>