diff --git a/index.php b/index.php index a75b838..d33c7b3 100644 --- a/index.php +++ b/index.php @@ -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'); diff --git a/js/app.js b/js/app.js index f9af068..bc491d6 100644 --- a/js/app.js +++ b/js/app.js @@ -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) { @@ -48,10 +65,16 @@ loadingTask.promise.then(function(pdf) { 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; + + 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(); diff --git a/pdf.html.php b/pdf.html.php index d73774d..a3618a8 100644 --- a/pdf.html.php +++ b/pdf.html.php @@ -15,8 +15,16 @@