Annotation example for PDF.js

by samu_eyes

HTML

<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="http://seikichi.github.io/tmp/PDFJS.0.8.715/pdf.min.js"></script>
<script src="http://seikichi.github.io/tmp/PDFJS.0.8.715/ui_utils.js"></script>
<div id="pdfContainer" class="pdf-content">
    <canvas id="the-canvas"></canvas>
    <div class="annotationLayer">s</div>
</div>

CSS

body {
    font-family: arial, verdana, sans-serif;
}
.pdf-content {
    border: 1px solid #000000;
}
.annotationLayer > a {
    display: block;
    position: absolute;
}
.annotationLayer > a:hover {
    opacity: 0.2;
    background: #ff0;
    box-shadow: 0px 2px 10px #ff0;
}
.annotText > div {
    z-index: 200;
    position: absolute;
    padding: 0.6em;
    max-width: 20em;
    background-color: #FFFF99;
    box-shadow: 0px 2px 10px #333;
    border-radius: 7px;
}
.annotText > img {
    position: absolute;
    opacity: 0.6;
}
.annotText > img:hover {
    opacity: 1;
}
.annotText > div > h1 {
    font-size: 1.2em;
    border-bottom: 1px solid #000000;
    margin: 0px;
}

JavaScript

PDFJS.workerSrc = 'http://seikichi.github.io/tmp/PDFJS.0.8.715/pdf.min.worker.js';

$(function () {
    var pdfData = loadPDFData();

    PDFJS.getDocument(pdfData).then(function (pdf) {
        return pdf.getPage(1);
    }).then(function (page) {
        var scale = 1;
        var viewport = page.getViewport(scale);
        var $canvas = $('#the-canvas');
        var canvas = $canvas.get(0);
        var context = canvas.getContext("2d");
        canvas.height = viewport.height;
        canvas.width = viewport.width;

        var $pdfContainer = $("#pdfContainer");
        $pdfContainer.css("height", canvas.height + "px")
            .css("width", canvas.width + "px");

        var renderContext = {
            canvasContext: context,
            viewport: viewport
        };
        page.render(renderContext);
        setupAnnotations(page, viewport, canvas, $('.annotationLayer'));
    });

    function setupAnnotations(page, viewport, canvas, $annotationLayerDiv) {
        var canvasOffset = $(canvas).offset();
        var promise = page.getAnnotations().then(function (annotationsData) {
            viewport = viewport.clone({
                dontFlip: true
            });

            for (var i = 0; i < annotationsData.length; i++) {
                var data = annotationsData[i];
                var annotation = PDFJS.Annotation.fromData(data);
                if (!annotation || !annotation.hasHtml()) {
                    continue;
                }

                var element = annotation.getHtmlElement(page.commonObjs);
                data = annotation.getData();
                var rect = data.rect;
                var view = page.view;
                rect = PDFJS.Util.normalizeRect([
                rect[0],
                view[3] - rect[1] + view[1],
                rect[2],
                view[3] - rect[3] + view[1]]);
                element.style.left = (canvasOffset.left + rect[0]) + 'px';
                element.style.top = (canvasOffset.top +...