24eme/signaturepdf
24eme/signaturepdf
1
0
Fork 0
mirror of https://github.com/24eme/signaturepdf.git synced 2023-08-25 09:33:08 +02:00
Code Issues Releases Wiki Activity

Import d'une signature depuis une image

Browse Source
This commit is contained in:
Vincent LAURENT 2021-09-20 00:10:22 +02:00
parent 079ccc7143
commit a433eefc1c
3 changed files with 76 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
index.php
View File

@ -49,6 +49,46 @@ $f3->route('GET /@key',
echo View::instance()->render('pdf.html.php');
}
);
$f3->route('POST /image2svg',
function($f3) {
$files = Web::instance()->receive(function($file,$formFieldName){
if(strpos(Web::instance()->mime($file['tmp_name'], true), 'image/') !== 0) {
return false;
}
if($file['size'] > (20 * 1024 * 1024)) { // if bigger than 20 MB
return false;
}
return true;
}, true);
$imageFile = null;
foreach($files as $file => $valid) {
if(!$valid) {
continue;
}
$imageFile = $file;
}
if(!$imageFile) {
$f3->error(403);
}
if(Web::instance()->mime($imageFile, true) == 'image/svg+xml') {
header('Content-Type: image/svg+xml');
echo file_get_contents($imageFile);
return;
}
shell_exec(sprintf("convert -background white -flatten %s %s", $imageFile, $imageFile.".bmp"));
shell_exec(sprintf("mkbitmap %s -o %s", $imageFile.".bmp", $imageFile.".bpm"));
shell_exec(sprintf("potrace --svg %s -o %s", $imageFile.".bpm", $imageFile.".svg"));
header('Content-Type: image/svg+xml');
echo file_get_contents($imageFile.".svg");
}
);
$f3->route('POST /@key/save',
function($f3) {
$key = $f3->get('PARAMS.key');

29
js/app.js
View File

@ -16,6 +16,23 @@ loadingTask.promise.then(function(pdf) {
maxWidth: 1.1
});
var svgImage = null;
document.getElementById('input-image-upload').addEventListener('change', function(event) {
var data = new FormData();
data.append('file', document.getElementById('input-image-upload').files[0]);
xhr = new XMLHttpRequest();
xhr.open( 'POST', document.getElementById('form-image-upload').action, true );
xhr.onreadystatechange = function () {
svgImage = "data:image/svg+xml;base64,"+btoa(this.responseText);
};
xhr.send( data );
event.preventDefault();
});
var canvasEditions = [];
document.getElementById('save').addEventListener('click', function(event) {
@ -49,9 +66,15 @@ loadingTask.promise.then(function(pdf) {
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;
svg2add = signaturePad.toDataURL("image/svg+xml");
if(svgImage) {
svg2add = svgImage;
}
fabric.loadSVGFromURL(svg2add, function(objects, options) {
options.left = x;
options.top = y;
var obj = fabric.util.groupSVGElements(objects, options);
console.log(obj);
canvasEdition.add(obj).renderAll();

10
pdf.html.php
View File

@ -15,8 +15,16 @@
<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>
<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>
<h5><i class="bi bi-vector-pen"></i> Signature à main lever</h5>
<canvas id="signature-pad" class="border bg-light" width=200 height=150></canvas>
<hr />
<form id="form-image-upload" action="/image2svg" method="POST" class="row g-3" enctype="multipart/form-data">
<div class="col-12">
<h5><i class="bi bi-image"></i> Importer une image</h5>
<input id="input-image-upload" class="form-control" name="image" type="file">
</div>
</form>
<hr />
<p><small class="text-muted">Double-cliquez sur le PDF pour ajouter la signature</small></p>
<form id="form_pdf" action="/<?php echo $key ?>/save" method="post">
<div class="position-fixed bottom-0 mb-2">