improve performance of pdf to image function

This commit is contained in:
raphael 2020-04-29 16:01:22 +02:00
parent c86ee45f11
commit d173c7728c
1 changed files with 39 additions and 41 deletions

View File

@ -4,8 +4,7 @@ import whiteboard from "./whiteboard";
import keybinds from "./keybinds"; import keybinds from "./keybinds";
import Picker from "vanilla-picker"; import Picker from "vanilla-picker";
import { dom } from "@fortawesome/fontawesome-svg-core"; import { dom } from "@fortawesome/fontawesome-svg-core";
import pdfjsLib from "pdfjs-dist/build/pdf"; import pdfjsLib from "pdfjs-dist/webpack";
import pdfjsLibWorker from "pdfjs-dist/build/pdf.worker";
function main() { function main() {
@ -477,49 +476,47 @@ function main() {
const base64data = reader.result; const base64data = reader.result;
uploadImgAndAddToWhiteboard(base64data); uploadImgAndAddToWhiteboard(base64data);
} }
} else if (isPDFFileName(filename)) { } else if (isPDFFileName(filename)) { //Handle PDF Files
var blob = e.originalEvent.dataTransfer.files[0]; var blob = e.originalEvent.dataTransfer.files[0];
pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsLibWorker;
var reader = new window.FileReader(); var reader = new window.FileReader();
reader.onloadend = function () { reader.onloadend = function () {
var pdfData = new Uint8Array(this.result); var pdfData = new Uint8Array(this.result);
var currentDataUrl = null; var loadingTask = pdfjsLib.getDocument({ data: pdfData });
var modalDiv = $('<div>' + loadingTask.promise.then(function (pdf) {
'Page: <select></select>' + console.log('PDF loaded');
'<br><button>Upload to Whiteboard</button>' +
'<img style="width:100%;" src=""/>' +
'</div>')
modalDiv.find("select").change(function () { var currentDataUrl = null;
showPDFPageAsImage(parseInt($(this).val())); var modalDiv = $('<div>' +
}) 'Page: <select></select> ' +
'<button style="margin-bottom: 3px;" class="modalBtn"><i class="fas fa-upload"></i> Upload to Whiteboard</button>' +
'<img style="width:100%;" src=""/>' +
'</div>')
modalDiv.find("button").click(function () { modalDiv.find("select").change(function () {
if (currentDataUrl) { showPDFPageAsImage(parseInt($(this).val()));
$(".basicalert").remove(); })
uploadImgAndAddToWhiteboard(currentDataUrl);
}
})
showBasicAlert(modalDiv, { modalDiv.find("button").click(function () {
header: "Pdf to Image", if (currentDataUrl) {
okBtnText: "cancel", $(".basicalert").remove();
headercolor: "#0082c9" uploadImgAndAddToWhiteboard(currentDataUrl);
})
showPDFPageAsImage(1);
function showPDFPageAsImage(pageNumber) {
var loadingTask = pdfjsLib.getDocument({ data: pdfData });
loadingTask.promise.then(function (pdf) {
console.log('PDF loaded');
if (!currentDataUrl) { //First load
for (var i = 1; i < pdf.numPages + 1; i++) {
modalDiv.find("select").append('<option value="' + i + '">' + i + '</option>')
}
} }
})
for (var i = 1; i < pdf.numPages + 1; i++) {
modalDiv.find("select").append('<option value="' + i + '">' + i + '</option>')
}
showBasicAlert(modalDiv, {
header: "Pdf to Image",
okBtnText: "cancel",
headercolor: "#0082c9"
})
showPDFPageAsImage(1);
function showPDFPageAsImage(pageNumber) {
// Fetch the page // Fetch the page
pdf.getPage(pageNumber).then(function (page) { pdf.getPage(pageNumber).then(function (page) {
@ -549,14 +546,15 @@ function main() {
}); });
}); });
}
}, function (reason) { }, function (reason) {
// PDF loading error // PDF loading error
showBasicAlert("Error loading pdf as image! Check that this is a vaild pdf file!");
console.error(reason);
});
showBasicAlert("Error loading pdf as image! Check that this is a vaild pdf file!");
console.error(reason);
});
}
} }
reader.readAsArrayBuffer(blob); reader.readAsArrayBuffer(blob);
} else { } else {