mirror of
https://github.com/24eme/signaturepdf
synced 2024-06-04 15:02:29 +02:00
Import d'une signature depuis une image
This commit is contained in:
parent
079ccc7143
commit
a433eefc1c
40
index.php
40
index.php
|
@ -49,6 +49,46 @@ $f3->route('GET /@key',
|
||||||
echo View::instance()->render('pdf.html.php');
|
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',
|
$f3->route('POST /@key/save',
|
||||||
function($f3) {
|
function($f3) {
|
||||||
$key = $f3->get('PARAMS.key');
|
$key = $f3->get('PARAMS.key');
|
||||||
|
|
31
js/app.js
31
js/app.js
|
@ -16,6 +16,23 @@ loadingTask.promise.then(function(pdf) {
|
||||||
maxWidth: 1.1
|
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 = [];
|
var canvasEditions = [];
|
||||||
|
|
||||||
document.getElementById('save').addEventListener('click', function(event) {
|
document.getElementById('save').addEventListener('click', function(event) {
|
||||||
|
@ -48,10 +65,16 @@ 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
|
||||||
|
|
||||||
fabric.loadSVGFromURL(signaturePad.toDataURL("image/svg+xml"), function(objects, options) {
|
svg2add = signaturePad.toDataURL("image/svg+xml");
|
||||||
options.left = x - 100;
|
|
||||||
options.top = y - 75;
|
if(svgImage) {
|
||||||
|
svg2add = svgImage;
|
||||||
|
}
|
||||||
|
|
||||||
|
fabric.loadSVGFromURL(svg2add, function(objects, options) {
|
||||||
|
options.left = x;
|
||||||
|
options.top = y;
|
||||||
var obj = fabric.util.groupSVGElements(objects, options);
|
var obj = fabric.util.groupSVGElements(objects, options);
|
||||||
console.log(obj);
|
console.log(obj);
|
||||||
canvasEdition.add(obj).renderAll();
|
canvasEdition.add(obj).renderAll();
|
||||||
|
|
10
pdf.html.php
10
pdf.html.php
|
@ -15,8 +15,16 @@
|
||||||
<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">
|
||||||
<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>
|
<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>
|
<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">
|
<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">
|
||||||
|
|
Loading…
Reference in a new issue