Sakurai/pdf.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #5143 from yurydelendik/fix-ts-example

Browse Source 
Simplify text-selection example.
This commit is contained in:
Jonas Jenwald 2014-08-06 18:31:23 +02:00
commit c6c4583956
3 changed files with 57 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
examples/text-selection/css/minimal.css
View File

@ -2,13 +2,24 @@ body {
font-family: arial, verdana, sans-serif; font-family: arial, verdana, sans-serif;
} }
.pdf-content { /* Allow absolute positioning of the canvas and textLayer in the page. They
will be the same size and will be placed on top of each other. */
.pdfPage {
position: relative;
overflow: visible;
border: 1px solid #000000; border: 1px solid #000000;
} }
.pdfPage > canvas {
position: absolute;
top: 0;
left: 0;
}
/* CSS classes used by TextLayerBuilder to style the text layer divs */ /* CSS classes used by TextLayerBuilder to style the text layer divs */
/* This stuff is important! Otherwise when you select the text, the text in the divs will show up! */ /* This stuff is important! Otherwise when you select the text,
the text in the divs will show up! */
::selection { background:rgba(0,0,255,0.3); } ::selection { background:rgba(0,0,255,0.3); }
::-moz-selection { background:rgba(0,0,255,0.3); } ::-moz-selection { background:rgba(0,0,255,0.3); }
@ -30,28 +41,3 @@ body {
white-space: pre; white-space: pre;
cursor: text; cursor: text;
} }
.textLayer .highlight {
margin: -1px;
padding: 1px;
background-color: rgba(180, 0, 170, 0.2);
border-radius: 4px;
}
.textLayer .highlight.begin {
border-radius: 4px 0px 0px 4px;
}
.textLayer .highlight.end {
border-radius: 0px 4px 4px 0px;
}
.textLayer .highlight.middle {
border-radius: 0px;
}
.textLayer .highlight.selected {
background-color: rgba(0, 100, 0, 0.2);
}

3
examples/text-selection/index.html
View File

@ -2,7 +2,6 @@
<head> <head>
<title>Minimal pdf.js text-selection demo</title> <title>Minimal pdf.js text-selection demo</title>
<link href="css/minimal.css" rel="stylesheet" media="screen" /> <link href="css/minimal.css" rel="stylesheet" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!-- you will need to run "node make generic" first before you can use this --> <!-- you will need to run "node make generic" first before you can use this -->
<script src="../../build/generic/build/pdf.js"></script> <script src="../../build/generic/build/pdf.js"></script>
@ -21,7 +20,7 @@
<body> <body>
This is a minimal pdf.js text-selection demo. The existing minimal-example shows you how to render a PDF, but not This is a minimal pdf.js text-selection demo. The existing minimal-example shows you how to render a PDF, but not
how to enable text-selection. This example shows you how to do both. <br /><br /> how to enable text-selection. This example shows you how to do both. <br /><br />
<div id="pdfContainer" class="pdf-content"> <div id="pdfContainer">
</div> </div>
</body> </body>
</html> </html>

81
examples/text-selection/js/minimal.js
View File

@ -12,6 +12,8 @@
// //
// The CSS used here is also very important since it sets up the CSS for the text layer divs overlays that // The CSS used here is also very important since it sets up the CSS for the text layer divs overlays that
// you actually end up selecting. // you actually end up selecting.
//
// NOTE: The original example was changed to remove jQuery usage, re-structure and add more comments.
window.onload = function () { window.onload = function () {
if (typeof PDFJS === 'undefined') { if (typeof PDFJS === 'undefined') {
@ -24,67 +26,70 @@ window.onload = function () {
function loadPdf(pdfPath) { function loadPdf(pdfPath) {
var pdf = PDFJS.getDocument(pdfPath); var pdf = PDFJS.getDocument(pdfPath);
pdf.then(renderPdf); return pdf.then(renderPdf);
} }
function renderPdf(pdf) { function renderPdf(pdf) {
pdf.getPage(1).then(renderPage); return pdf.getPage(1).then(renderPage);
} }
function renderPage(page) { function renderPage(page) {
var viewport = page.getViewport(scale); var viewport = page.getViewport(scale);
var $canvas = jQuery("<canvas></canvas>");
// Set the canvas height and width to the height and width of the viewport // Create and append the 'pdf-page' div to the pdf container.
var canvas = $canvas.get(0); var pdfPage = document.createElement('div');
var context = canvas.getContext("2d"); pdfPage.className = 'pdfPage';
var pdfContainer = document.getElementById('pdfContainer');
pdfContainer.appendChild(pdfPage);
// The following few lines of code set up scaling on the context if we are on a HiDPI display // Set the canvas height and width to the height and width of the viewport.
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
// The following few lines of code set up scaling on the context, if we are
// on a HiDPI display.
var outputScale = getOutputScale(context); var outputScale = getOutputScale(context);
canvas.width = (Math.floor(viewport.width) * outputScale.sx) | 0; canvas.width = (Math.floor(viewport.width) * outputScale.sx) | 0;
canvas.height = (Math.floor(viewport.height) * outputScale.sy) | 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
var $pdfContainer = jQuery("#pdfContainer");
$pdfContainer.css("height", canvas.style.height)
.css("width", canvas.style.width);
$pdfContainer.append($canvas);
var canvasOffset = $canvas.offset();
var $textLayerDiv = jQuery("<div />")
.addClass("textLayer")
.css("height", canvas.style.height)
.css("width", canvas.style.width)
.offset({
top: canvasOffset.top,
left: canvasOffset.left
});
context._scaleX = outputScale.sx; context._scaleX = outputScale.sx;
context._scaleY = outputScale.sy; context._scaleY = outputScale.sy;
if (outputScale.scaled) { if (outputScale.scaled) {
context.scale(outputScale.sx, outputScale.sy); context.scale(outputScale.sx, outputScale.sy);
} }
$pdfContainer.append($textLayerDiv); // The page, canvas and text layer elements will have the same size.
canvas.style.width = Math.floor(viewport.width) + 'px';
canvas.style.height = Math.floor(viewport.height) + 'px';
page.getTextContent().then(function (textContent) { pdfPage.style.width = canvas.style.width;
var textLayer = new TextLayerBuilder({ pdfPage.style.height = canvas.style.height;
textLayerDiv: $textLayerDiv.get(0), pdfPage.appendChild(canvas);
var textLayerDiv = document.createElement('div');
textLayerDiv.className = 'textLayer';
textLayerDiv.style.width = canvas.style.width;
textLayerDiv.style.height = canvas.style.height;
pdfPage.appendChild(textLayerDiv);
// Painting the canvas...
var renderContext = {
canvasContext: context,
viewport: viewport
};
var renderTask = page.render(renderContext);
// ... and at the same time, getting the text and creating the text layer.
var textLayerPromise = page.getTextContent().then(function (textContent) {
var textLayerBuilder = new TextLayerBuilder({
textLayerDiv: textLayerDiv,
viewport: viewport, viewport: viewport,
pageIndex: 0 pageIndex: 0
}); });
textLayer.setTextContent(textContent); textLayerBuilder.setTextContent(textContent);
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
}); });
// We might be interested when rendering complete and text layer is built.
return Promise.all([renderTask.promise, textLayerPromise]);
} }
loadPdf('pdf/TestDocument.pdf'); loadPdf('pdf/TestDocument.pdf');