|
|
@ -14,8 +14,13 @@ |
|
|
|
// you actually end up selecting.
|
|
|
|
// you actually end up selecting.
|
|
|
|
|
|
|
|
|
|
|
|
window.onload = function () { |
|
|
|
window.onload = function () { |
|
|
|
|
|
|
|
if (typeof PDFJS === 'undefined') { |
|
|
|
|
|
|
|
alert('Built version of pdf.js is not found\nPlease run `node make generic`'); |
|
|
|
|
|
|
|
return; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
var scale = 1.5; //Set this to whatever you want. This is basically the "zoom" factor for the PDF.
|
|
|
|
var scale = 1.5; //Set this to whatever you want. This is basically the "zoom" factor for the PDF.
|
|
|
|
PDFJS.workerSrc = '../../src/worker_loader.js'; |
|
|
|
PDFJS.workerSrc = '../../build/generic/build/pdf.worker.js'; |
|
|
|
|
|
|
|
|
|
|
|
function loadPdf(pdfPath) { |
|
|
|
function loadPdf(pdfPath) { |
|
|
|
var pdf = PDFJS.getDocument(pdfPath); |
|
|
|
var pdf = PDFJS.getDocument(pdfPath); |
|
|
@ -33,38 +38,30 @@ window.onload = function () { |
|
|
|
// Set the canvas height and width to the height and width of the viewport
|
|
|
|
// Set the canvas height and width to the height and width of the viewport
|
|
|
|
var canvas = $canvas.get(0); |
|
|
|
var canvas = $canvas.get(0); |
|
|
|
var context = canvas.getContext("2d"); |
|
|
|
var context = canvas.getContext("2d"); |
|
|
|
canvas.height = viewport.height; |
|
|
|
|
|
|
|
canvas.width = viewport.width; |
|
|
|
// The following few lines of code set up scaling on the context if we are on a HiDPI display
|
|
|
|
|
|
|
|
var outputScale = getOutputScale(context); |
|
|
|
|
|
|
|
canvas.width = (Math.floor(viewport.width) * outputScale.sx) | 0; |
|
|
|
|
|
|
|
canvas.height = (Math.floor(viewport.height) * outputScale.sy) | 0; |
|
|
|
|
|
|
|
canvas.style.width = Math.floor(viewport.width) + 'px'; |
|
|
|
|
|
|
|
canvas.style.height = Math.floor(viewport.height) + 'px'; |
|
|
|
|
|
|
|
|
|
|
|
// Append the canvas to the pdf container div
|
|
|
|
// Append the canvas to the pdf container div
|
|
|
|
var $pdfContainer = jQuery("#pdfContainer"); |
|
|
|
var $pdfContainer = jQuery("#pdfContainer"); |
|
|
|
$pdfContainer.css("height", canvas.height + "px").css("width", canvas.width + "px"); |
|
|
|
$pdfContainer.css("height", canvas.style.height) |
|
|
|
|
|
|
|
.css("width", canvas.style.width); |
|
|
|
$pdfContainer.append($canvas); |
|
|
|
$pdfContainer.append($canvas); |
|
|
|
|
|
|
|
|
|
|
|
var canvasOffset = $canvas.offset(); |
|
|
|
var canvasOffset = $canvas.offset(); |
|
|
|
var $textLayerDiv = jQuery("<div />") |
|
|
|
var $textLayerDiv = jQuery("<div />") |
|
|
|
.addClass("textLayer") |
|
|
|
.addClass("textLayer") |
|
|
|
.css("height", viewport.height + "px") |
|
|
|
.css("height", canvas.style.height) |
|
|
|
.css("width", viewport.width + "px") |
|
|
|
.css("width", canvas.style.width) |
|
|
|
.offset({ |
|
|
|
.offset({ |
|
|
|
top: canvasOffset.top, |
|
|
|
top: canvasOffset.top, |
|
|
|
left: canvasOffset.left |
|
|
|
left: canvasOffset.left |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
// The following few lines of code set up scaling on the context if we are on a HiDPI display
|
|
|
|
|
|
|
|
var outputScale = getOutputScale(context); |
|
|
|
|
|
|
|
if (outputScale.scaled) { |
|
|
|
|
|
|
|
var cssScale = 'scale(' + (1 / outputScale.sx) + ', ' + |
|
|
|
|
|
|
|
(1 / outputScale.sy) + ')'; |
|
|
|
|
|
|
|
CustomStyle.setProp('transform', canvas, cssScale); |
|
|
|
|
|
|
|
CustomStyle.setProp('transformOrigin', canvas, '0% 0%'); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if ($textLayerDiv.get(0)) { |
|
|
|
|
|
|
|
CustomStyle.setProp('transform', $textLayerDiv.get(0), cssScale); |
|
|
|
|
|
|
|
CustomStyle.setProp('transformOrigin', $textLayerDiv.get(0), '0% 0%'); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
context._scaleX = outputScale.sx; |
|
|
|
context._scaleX = outputScale.sx; |
|
|
|
context._scaleY = outputScale.sy; |
|
|
|
context._scaleY = outputScale.sy; |
|
|
|
if (outputScale.scaled) { |
|
|
|
if (outputScale.scaled) { |
|
|
@ -76,14 +73,14 @@ window.onload = function () { |
|
|
|
page.getTextContent().then(function (textContent) { |
|
|
|
page.getTextContent().then(function (textContent) { |
|
|
|
var textLayer = new TextLayerBuilder({ |
|
|
|
var textLayer = new TextLayerBuilder({ |
|
|
|
textLayerDiv: $textLayerDiv.get(0), |
|
|
|
textLayerDiv: $textLayerDiv.get(0), |
|
|
|
|
|
|
|
viewport: viewport, |
|
|
|
pageIndex: 0 |
|
|
|
pageIndex: 0 |
|
|
|
}); |
|
|
|
}); |
|
|
|
textLayer.setTextContent(textContent); |
|
|
|
textLayer.setTextContent(textContent); |
|
|
|
|
|
|
|
|
|
|
|
var renderContext = { |
|
|
|
var renderContext = { |
|
|
|
canvasContext: context, |
|
|
|
canvasContext: context, |
|
|
|
viewport: viewport, |
|
|
|
viewport: viewport |
|
|
|
textLayer: textLayer |
|
|
|
|
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
page.render(renderContext); |
|
|
|
page.render(renderContext); |
|
|
|