The rotation of pdf pages are taken into account on the server side with pdftk

This commit is contained in:
Vincent LAURENT 2022-04-08 01:06:35 +02:00
parent 43992abcff
commit 152d54b397
2 changed files with 20 additions and 5 deletions

View File

@ -283,7 +283,7 @@ $f3->route('POST /organize',
$filenames = array();
$tmpfile = tempnam($f3->get('UPLOADS'), 'pdfsignature_organize');
unlink($tmpfile);
$pages = explode(',', preg_replace('/[^A-Z0-9,]+/', '', $f3->get('POST.pages')));
$pages = explode(',', preg_replace('/[^A-Z0-9a-z,]+/', '', $f3->get('POST.pages')));
$files = Web::instance()->receive(function($file,$formFieldName){
if(strpos(Web::instance()->mime($file['tmp_name'], true), 'application/pdf') !== 0) {

View File

@ -33,7 +33,7 @@ var loadPDF = async function(pdfBlob, filename, pdfIndex) {
let pageIndex = pdfLetter + "_" + (page.pageNumber - 1);
pages[pageIndex] = page;
document.getElementById('container-pages').insertAdjacentHTML('beforeend', '<div class="position-relative mt-0 ms-1 me-0 mb-1 canvas-container shadow-sm d-flex align-items-center justify-content-center bg-white" id="canvas-container-' + pageIndex +'" draggable="true"><canvas class="canvas-pdf" style="border: 2px solid transparent;"></canvas><div class="position-absolute top-50 start-50 translate-middle p-2 ps-3 pe-3 rounded-circle container-resize btn-drag"><i class="bi bi-arrows-move"></i></div><div class="position-absolute top-50 end-0 translate-middle-y p-2 ps-3 pe-3 rounded-circle container-rotate btn-rotate"><i class="bi bi-arrow-clockwise"></i></div><div class="position-absolute text-center w-100 pt-1 container-checkbox pb-4" style="background: rgb(255,255,255,0.8); bottom: 0; cursor: pointer;"><div class="form-switch"><input form="form_pdf" class="form-check-input checkbox-page" role="switch" type="checkbox" checked="checked" style="cursor: pointer;" value="'+pdfLetter+page.pageNumber+'" /></div></div><p class="position-absolute text-center w-100 ps-2 pe-2 pb-0 mb-1 opacity-75" style="bottom: 0; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;">Page '+page.pageNumber+' - '+filename+'</p><input type="hidden" value="0" id="input_rotate_'+pageIndex+'" /></div>');
document.getElementById('container-pages').insertAdjacentHTML('beforeend', '<div class="position-relative mt-0 ms-1 me-0 mb-1 canvas-container shadow-sm d-flex align-items-center justify-content-center bg-white" id="canvas-container-' + pageIndex +'" draggable="true"><canvas class="canvas-pdf" style="border: 2px solid transparent;"></canvas><div class="position-absolute top-50 start-50 translate-middle p-2 ps-3 pe-3 rounded-circle container-resize btn-drag"><i class="bi bi-arrows-move"></i></div><div class="position-absolute top-50 end-0 translate-middle-y p-2 ps-3 pe-3 rounded-circle container-rotate btn-rotate"><i class="bi bi-arrow-clockwise"></i></div><div class="position-absolute text-center w-100 pt-1 container-checkbox pb-4" style="background: rgb(255,255,255,0.8); bottom: 0; cursor: pointer;"><div class="form-switch"><input form="form_pdf" class="form-check-input checkbox-page" role="switch" type="checkbox" checked="checked" style="cursor: pointer;" value="'+pdfLetter+page.pageNumber+'" /></div></div><p class="position-absolute text-center w-100 ps-2 pe-2 pb-0 mb-1 opacity-75" style="bottom: 0; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;">Page '+page.pageNumber+' - '+filename+'</p><input type="hidden" class="input-rotate" value="0" id="input_rotate_'+pageIndex+'" /></div>');
let canvasContainer = document.getElementById('canvas-container-' + pageIndex);
canvasContainer.addEventListener('dragstart', function(e) {
@ -82,7 +82,7 @@ var loadPDF = async function(pdfBlob, filename, pdfIndex) {
});
canvasContainer.querySelector('.btn-rotate').addEventListener('click', function(e) {
let inputRotate = document.querySelector('#input_rotate_'+pageIndex);
inputRotate.value = parseInt(inputRotate.value) + 90;
inputRotate.value = (parseInt(inputRotate.value) + 90) % 360;
pageRender(pageIndex);
})
@ -162,9 +162,24 @@ var createEventsListener = function() {
});
document.getElementById('save').addEventListener('click', function(event) {
let order = [];
document.querySelectorAll('.checkbox-page').forEach(function(checkbox) {
document.querySelectorAll('.canvas-container').forEach(function(canvasContainer) {
let checkbox = canvasContainer.querySelector('.checkbox-page');
let inputRotate = canvasContainer.querySelector('.input-rotate');
let pageValue = "";
if(checkbox.checked) {
order.push(checkbox.value);
pageValue = checkbox.value;
}
if(pageValue && inputRotate.value == 90) {
pageValue = pageValue + "-east";
}
if(pageValue && inputRotate.value == 180) {
pageValue = pageValue + "-south";
}
if(pageValue && inputRotate.value == 270) {
pageValue = pageValue + "-west";
}
if(pageValue) {
order.push(pageValue);
}
});
document.querySelector('#input_pages').value = order.join(',');