1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
(function () {
const url = 'https://cdn.jsdelivr.net/gh/Qiu-Weidong/blog/resources/pdf/The Definitive ANTLR 4 Reference, 2nd Edition.pdf';
if (!pdfjsLib || !pdfjsLib.getDocument) {
return alert('Please build the pdfjs-dist library using\n `gulp dist-install`');
}
pdfjsLib.GlobalWorkerOptions.workerSrc =
"https://cdn.jsdelivr.net/gh/Qiu-Weidong/blog/resources/pdfjs-dist/build/pdf.worker.min.js";
let pdfDoc = null, scale = 1.5;
const container = document.getElementById('magazine');
const CMAP_URL = "https://cdn.jsdelivr.net/gh/Qiu-Weidong/blog/resources/pdfjs-dist/cmaps/";
const CMAP_PACKED = true;
const ENABLE_XFA = true;
let loadingTask = pdfjsLib.getDocument({
url,
cMapUrl: CMAP_URL,
cMapPacked: CMAP_PACKED,
enableXfa: ENABLE_XFA,
});
loadingTask.promise.then(function (pdfDoc_) {
pdfDoc = pdfDoc_;
const cover = document.createElement('div');
cover.className = 'hard cover';
container.appendChild(cover);
renderPage(1).then(canvas => {
cover.appendChild(canvas);
const height = container.clientWidth / 2 * canvas.height / canvas.width;
container.style.height = height + 'px';
const cover2 = document.createElement('div');
cover2.className = 'hard cover';
container.appendChild(cover2);
renderPage(2).then(canvas => {
cover2.appendChild(canvas);
$('#magazine').turn({
pages: pdfDoc.numPages,
display: 'double',
acceleration: true,
gradients: !$.isTouch,
elevation: 50,
when: {
turning: function (e, page, view) {
const range = $(this).turn('range', page);
const start = range[0], end = range[1];
for (page = start; page <= end; page++) {
addPage(page, $(this));
}
},
}
});
$('#magazine').turn('page', pdfDoc.numPages);
});
});
});
function renderPage(num) {
return new Promise(function (resolve, _reject) {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const realPage = num ;
pdfDoc.getPage(realPage).then(function (page) {
let viewport = page.getViewport({ scale: scale, });
let outputScale = window.devicePixelRatio || 1;
canvas.width = Math.floor(viewport.width * outputScale);
canvas.height = Math.floor(viewport.height * outputScale);
canvas.style.width = "100%";
let transform = outputScale !== 1
? [outputScale, 0, 0, outputScale, 0, 0]
: null;
let renderContext = {
canvasContext: ctx,
transform: transform,
viewport: viewport,
};
page.render(renderContext).promise.then(() => {
resolve(canvas);
});
});
});
}
function addPage(page, book) {
if (!book.turn('hasPage', page)) {
const element = document.createElement('div');
element.innerHTML = '<i class="loader"></i>';
book.turn('addPage', element, page);
renderPage(page).then(canvas => { element.innerHTML = ''; element.appendChild(canvas); });
}
}
$(window).bind('keydown', function (e) {
if (e.keyCode == 37)
$('#magazine').turn('previous');
else if (e.keyCode == 39)
$('#magazine').turn('next');
});
})();
|
