diff --git a/app.php b/app.php index 5e3eef1..322b5b5 100644 --- a/app.php +++ b/app.php @@ -87,10 +87,9 @@ $f3->route('POST /image2svg', shell_exec(sprintf("convert -background white -flatten %s %s", $imageFile, $imageFile.".bmp")); shell_exec(sprintf("mkbitmap -x -f 8 %s -o %s", $imageFile.".bmp", $imageFile.".bpm")); shell_exec(sprintf("potrace --svg %s -o %s", $imageFile.".bpm", $imageFile.".svg")); - shell_exec(sprintf("convert -trim %s %s", $imageFile.".svg", $imageFile."-trim.svg")); header('Content-Type: image/svg+xml'); - echo file_get_contents($imageFile."-trim.svg"); + echo file_get_contents($imageFile.".svg"); } ); $f3->route('POST /@key/save', diff --git a/public/js/app.js b/public/js/app.js index 26801ca..c672bc7 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -87,6 +87,29 @@ loadingTask.promise.then(function(pdf) { return new Blob([u8arr], {type:mime}); } + function trimSvgWhitespace(svgContent) { + if(!svgContent) { + + return null; + } + var svgContainer = document.createElement("div") + svgContainer.classList.add('invisible'); + svgContainer.classList.add('position-absolute'); + svgContainer.classList.add('top-0'); + svgContainer.classList.add('start-0'); + svgContainer.style = "z-index: -1;"; + svgContainer.innerHTML = svgContent; + document.body.appendChild(svgContainer); + var svg = svgContainer.querySelector('svg'); + var box = svg.getBBox(); + svg.setAttribute("viewBox", [box.x, box.y, box.width, box.height].join(" ")); + svgContent = svgContainer.innerHTML; + document.body.removeChild(svgContainer) + + return svgContent = svgContainer.innerHTML; + document; + } + var signaturePad = new SignaturePad(document.getElementById('signature-pad'), { penColor: 'rgb(0, 0, 0)', minWidth: 1.25, @@ -101,7 +124,7 @@ loadingTask.promise.then(function(pdf) { xhr = new XMLHttpRequest(); xhr.open( 'POST', document.getElementById('form-image-upload').action, true ); xhr.onreadystatechange = function () { - var svgImage = "data:image/svg+xml;base64,"+btoa(this.responseText); + var svgImage = "data:image/svg+xml;base64,"+btoa(trimSvgWhitespace(this.responseText)); document.getElementById('img-upload').src = svgImage; document.getElementById('img-upload').classList.remove("d-none"); document.getElementById('btn_modal_ajouter').focus(); @@ -141,10 +164,10 @@ loadingTask.promise.then(function(pdf) { 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 () { - var svgImage = "data:image/svg+xml;base64,"+btoa(this.responseText); + var svgImage = "data:image/svg+xml;base64,"+btoa(trimSvgWhitespace(this.responseText)); document.getElementById('img-upload').src = svgImage; document.getElementById('img-upload').classList.remove("d-none"); document.getElementById('btn_modal_ajouter').focus();