WebDev/VersaWhiteboard
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

working with multiple pages

Browse Source
This commit is contained in:
raphael 2020-04-29 15:50:31 +02:00
parent 66898e03ef
commit c86ee45f11
1 changed files with 65 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
src/js/main.js
View File

@ -484,56 +484,79 @@ function main() {
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 loadingTask = pdfjsLib.getDocument({ data: pdfData });
loadingTask.promise.then(function (pdf) {
console.log('PDF loaded');
// Fetch the first page var currentDataUrl = null;
var pageNumber = 1; var modalDiv = $('<div>' +
pdf.getPage(pageNumber).then(function (page) { 'Page: <select></select>' +
console.log('Page loaded'); '<br><button>Upload to Whiteboard</button>' +
'<img style="width:100%;" src=""/>' +
'</div>')
modalDiv.find("select").change(function () {
showPDFPageAsImage(parseInt($(this).val()));
})
modalDiv.find("button").click(function () {
if (currentDataUrl) {
$(".basicalert").remove();
uploadImgAndAddToWhiteboard(currentDataUrl);
}
})
showBasicAlert(modalDiv, {
header: "Pdf to Image",
okBtnText: "cancel",
headercolor: "#0082c9"
})
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>')
}
}
// Fetch the page
pdf.getPage(pageNumber).then(function (page) {
console.log('Page loaded');
var scale = 1.5; var scale = 1.5;
var viewport = page.getViewport({ scale: scale }); var viewport = page.getViewport({ scale: scale });
// Prepare canvas using PDF page dimensions // Prepare canvas using PDF page dimensions
var canvas = $("<canvas></canvas>")[0]; var canvas = $("<canvas></canvas>")[0];
var context = canvas.getContext('2d'); var context = canvas.getContext('2d');
canvas.height = viewport.height; canvas.height = viewport.height;
canvas.width = viewport.width; canvas.width = viewport.width;
// Render PDF page into canvas context // Render PDF page into canvas context
var renderContext = { var renderContext = {
canvasContext: context, canvasContext: context,
viewport: viewport viewport: viewport
}; };
var renderTask = page.render(renderContext); var renderTask = page.render(renderContext);
renderTask.promise.then(function () { renderTask.promise.then(function () {
var dataUrl = canvas.toDataURL("image/jpeg", 1.0);
currentDataUrl = dataUrl;
modalDiv.find("img").attr("src", dataUrl);
console.log('Page rendered');
var dataUrl = canvas.toDataURL("image/jpeg", 1.0); });
console.log('Page rendered');
var modalDiv = $('<div>' +
'<img style="width:100%;" src="' + dataUrl + '"/>' +
'<br><button>Upload to Whiteboard</button>' +
'</div>')
modalDiv.find("button").click(function () {
$(".basicalert").remove();
uploadImgAndAddToWhiteboard(dataUrl);
})
showBasicAlert(modalDiv, {
header: "Pdf to Image",
okBtnText: "cancel",
headercolor: "#0082c9"
})
}); });
}, function (reason) {
// PDF loading error
showBasicAlert("Error loading pdf as image! Check that this is a vaild pdf file!");
console.error(reason);
}); });
}, function (reason) { }
// PDF loading error
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 {