I tried rendering PDF document using pdf.js library. I know only basics in javascript and I am new to promises, so at first I followed advice on this page: Render .pdf to single Canvas using pdf.js and ImageData (2. answer). But as a result, I rendered my document with all pages blank. All pictures and colors are fine, but not even a line of text. I also tried some other tutorials, but either I get the same result, or the document is completely missing.
Right now, my code looks like this: (It's almost identical to the tutorial)
function loadPDFJS(pid, pageUrl){
PDFJS.disableWorker = true;
PDFJS.workerSrc = 'pdfjs/build/pdf.worker.js';
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var pages = [];
var currentPage = 1;
var url = '/search/nimg/IMG_FULL/' + pid + '#page=1';
PDFJS.getDocument(url).then(function (pdf) {
if(currentPage <= pdf.numPages) getPage();
function getPage() {
pdf.getPage(currentPage).then(function(page){
var scale = 1.5;
var viewport = page.getViewport(scale);
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: ctx,
viewport: viewport
};
page.render(renderContext).then(function() {
pages.push(canvas.toDataURL());
if(currentPage < pdf.numPages) {
currentPage++;
getPage();
} else {
done();
}
});
});
}
});
function done() {
for(var i = 0; i < pages.length; i++){
drawPage(i, addPage);
}
}
function addPage(img){
document.body.appendChild(img);
}
function drawPage(index, callback){
var img = new Image;
img.onload = function() {
ctx.drawImage(this, 0, 0, ctx.canvas.width, ctx.canvas.height);
callback(this);
}
img.src = pages[index];
}
}
K so I just looked at my code again and I started all over. I made it simpler and I finally got it to work. Now it looks like this:
var canvasContainer = document.getElementById('pdfImageImg');
function loadPDFJS(pid, pageUrl){
PDFJS.workerSrc = 'pdfjs/build/pdf.worker.js';
var currentPage = 1;
var pages = [];
var url = '/search/nimg/IMG_FULL/' + pid + '#page=1';
PDFJS.getDocument(url).then(function(pdf) {
pdf.getPage(currentPage).then(renderPage);
function renderPage(page) {
var height = 700;
var viewport = page.getViewport(1);
var scale = height / viewport.height;
var scaledViewport = page.getViewport(scale);
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
canvas.height = scaledViewport.height;
canvas.width = scaledViewport.width;
var renderContext = {
canvasContext: context,
viewport: scaledViewport
};
page.render(renderContext).then(function () {
if(currentPage < pdf.numPages) {
pages[currentPage] = canvas;
currentPage++;
pdf.getPage(currentPage).then(renderPage);
} else {
for (var i = 1; i < pages.length; i++) {
document.getElementById('pdfImageImg').appendChild(pages[i]);
}
}
});
}
});
}
Thank you #user3913960, your concept worked for me. I found some issues in your code which I fixed. Here is the code:
function loadPDFJS(pageUrl) {
PDFJS.workerSrc = 'resources/js/pdfjs/pdf.worker.js';
var currentPage = 1;
var pages = [];
var globalPdf = null;
var container = document.getElementById('pdf-container');
function renderPage(page) {
//
// Prepare canvas using PDF page dimensions
//
var canvas = document.createElement('canvas');
// Link: http://stackoverflow.com/a/13039183/1577396
// Canvas width should be set to the window's width for appropriate
// scaling factor of the document with respect to the canvas width
var viewport = page.getViewport(window.screen.width / page.getViewport(1.0).width);
// append the created canvas to the container
container.appendChild(canvas);
// Get context of the canvas
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
//
// Render PDF page into canvas context
//
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext).then(function () {
if (currentPage < globalPdf.numPages) {
pages[currentPage] = canvas;
currentPage++;
globalPdf.getPage(currentPage).then(renderPage);
} else {
// Callback function here, which will trigger when all pages are loaded
}
});
}
PDFJS.getDocument(pageUrl).then(function (pdf) {
if(!globalPdf){
globalPdf = pdf;
}
pdf.getPage(currentPage).then(renderPage);
});
}
loadPDFJS("somepdffilenamehere.pdf");
The pdfjs-dist library contains parts for building PDF viewer. You can use PDFPageView to render all pages. Based on https://github.com/mozilla/pdf.js/blob/master/examples/components/pageviewer.html :
var url = "https://cdn.mozilla.net/pdfjs/tracemonkey.pdf";
var container = document.getElementById('container');
// Load document
PDFJS.getDocument(url).then(function (doc) {
var promise = Promise.resolve();
for (var i = 0; i < doc.numPages; i++) {
// One-by-one load pages
promise = promise.then(function (id) {
return doc.getPage(id + 1).then(function (pdfPage) {
// Add div with page view.
var SCALE = 1.0;
var pdfPageView = new PDFJS.PDFPageView({
container: container,
id: id,
scale: SCALE,
defaultViewport: pdfPage.getViewport(SCALE),
// We can enable text/annotations layers, if needed
textLayerFactory: new PDFJS.DefaultTextLayerFactory(),
annotationLayerFactory: new PDFJS.DefaultAnnotationLayerFactory()
});
// Associates the actual page with the view, and drawing it
pdfPageView.setPdfPage(pdfPage);
return pdfPageView.draw();
});
}.bind(null, i));
}
return promise;
});
#container > *:not(:first-child) {
border-top: solid 1px black;
}
<link href="https://npmcdn.com/pdfjs-dist/web/pdf_viewer.css" rel="stylesheet"/>
<script src="https://npmcdn.com/pdfjs-dist/web/compatibility.js"></script>
<script src="https://npmcdn.com/pdfjs-dist/build/pdf.js"></script>
<script src="https://npmcdn.com/pdfjs-dist/web/pdf_viewer.js"></script>
<div id="container" class="pdfViewer singlePageView"></div>
See also How to display whole PDF (not only one page) with PDF.JS?
I have used below code to render a pdf with multiple pages.
PDFJS.disableWorker = true; // due to CORS
var canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d'),
pages = [],
currentPage = 1,
url = 'your_pdf.pdf';
PDFJS.getDocument(url).then(function(pdf) {
if (currentPage <= pdf.numPages) getPage();
// main entry point/function for loop
function getPage() {
// when promise is returned do as usual
pdf.getPage(currentPage).then(function(page) {
var scale = 1;
var viewport = page.getViewport(scale);
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: ctx,
viewport: viewport
};
// now, tap into the returned promise from render:
page.render(renderContext).then(function() {
// store compressed image data in array
pages.push(canvas.toDataURL());
if (currentPage < pdf.numPages) {
currentPage++;
getPage(); // get next page
} else {
// after all the pages are parsed
for (var i = 0; i < pages.length; i++) {
drawPage(i);
}
}
});
});
}
});
function drawPage(index, callback) {
var img = new Image;
img.onload = function() {
ctx.drawImage(this, 0, 0, ctx.canvas.width, ctx.canvas.height);
if (index > 0) img.style.display = 'inline-block';
document.body.appendChild(img);
}
img.src = pages[index]; // start loading the data-uri as source
}
Related
Im trying to develop a frontend code that asks the user to provide a pdf and then internally (in the users browser) produces an array of png's (via data to url) where each entry in the array corresponds to a page in the pdf:
dat[0] = png of page 1
dat[1] = png of page 2
...
When I test the below code the pages are somehow rendered on top of eachother and rotated.
<script src="http://cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.1/processing-api.min.js"></script><html>
<!--
Created using jsbin.com
Source can be edited via http://jsbin.com/pdfjs-helloworld-v2/8598/edit
-->
<body>
<canvas id="the-canvas" style="border:1px solid black"></canvas>
<input id='pdf' type='file'/>
<!-- Use latest PDF.js build from Github -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="pdf.js"></script>
<script src="pdf.worker.js"></script>
<script type="text/javascript">
//
// Asynchronous download PDF as an ArrayBuffer
//
dat = [];
var pdf = document.getElementById('pdf');
pdf.onchange = function(ev) {
if (file = document.getElementById('pdf').files[0]) {
fileReader = new FileReader();
fileReader.onload = function(ev) {
//console.log(ev);
PDFJS.getDocument(fileReader.result).then(function getPdfHelloWorld(pdf) {
//
// Fetch the first page
//
number_of_pages = pdf.numPages;
for(i = 1; i < number_of_pages+1; ++i) {
pdf.getPage(i).then(function getPageHelloWorld(page) {
var scale = 1;
var viewport = page.getViewport(scale);
//
// Prepare canvas using PDF page dimensions
//
var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
//
// Render PDF page into canvas context
//
var renderContext = {
canvasContext: context,
viewport: viewport};
page.render(renderContext).then(function() {
dat.push(canvas.toDataURL('image/png'));
});
});
}
//console.log(pdf.numPages);
//console.log(pdf)
}, function(error){
console.log(error);
});
};
fileReader.readAsArrayBuffer(file);
}
}
</script>
<style id="jsbin-css">
</style>
<script>
</script>
</body>
</html>
Im only interested in the array dat. When I render the images in the array I see that
dat[0] = png of page 1 (correct)
dat[1] = png of page 1 and png page 2 rotated 180 on top of each other
...
How do I ensure a correct rendering of single pages in each entry of the array?
Try rendering the pages on a different canvas. You can create a canvas and append it to the container using
var canvasdiv = document.getElementById('canvas');
var canvas = document.createElement('canvas');
canvasdiv.appendChild(canvas);
var url = 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf';
var PDFJS = window['pdfjs-dist/build/pdf'];
PDFJS.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';
var loadingTask = PDFJS.getDocument(url);
loadingTask.promise.then(function(pdf) {
var canvasdiv = document.getElementById('canvas');
var totalPages = pdf.numPages
var data = [];
for (let pageNumber = 1; pageNumber <= totalPages; pageNumber++) {
pdf.getPage(pageNumber).then(function(page) {
var scale = 1.5;
var viewport = page.getViewport({ scale: scale });
var canvas = document.createElement('canvas');
canvasdiv.appendChild(canvas);
// Prepare canvas using PDF page dimensions
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
// Render PDF page into canvas context
var renderContext = { canvasContext: context, viewport: viewport };
var renderTask = page.render(renderContext);
renderTask.promise.then(function() {
data.push(canvas.toDataURL('image/png'))
console.log(data.length + ' page(s) loaded in data')
});
});
}
}, function(reason) {
// PDF loading error
console.error(reason);
});
canvas {
border: 1px solid black;
margin: 5px;
width: 25%;
}
<script src="//mozilla.github.io/pdf.js/build/pdf.js"></script>
<div id="canvas"></div>
For those who came here from google for an Angular solution here is an implementation, rendering each page on a different canvas.
pdf-viewer.component.html
<div *ngFor="let page of pages>
<canvas #canvas hidden ></canvas>
<img [src]="page">
</div>
pdf-viewer.component.ts
import * as pdfjsLib from 'pdfjs-dist';
pdfjsLib.GlobalWorkerOptions.workerSrc = 'pdf.worker.js';
#Component({
selector: 'app-pdf-viewer',
templateUrl: './pdf-viewer.component.html',
styleUrls: ['./pdf-viewer.component.scss'],
})
export class PdfViewerComponent implements OnInit {
constructor() { }
#ViewChildren('canvas') canvas: QueryList<ElementRef<HTMLCanvasElement>>;
#Input() pdfBase64: string;
pages: string[] = [];
ngOnInit(): void {
this.setPages();
}
async setPages(): Promise<void> {
const pdfDoc = await pdfjsLib.getDocument({ url: this.pdfBase64 }).promise;
const totalPages = pdfDoc.numPages;
this.pages = new Array(totalPages);
for (let i = 0; i < totalPages; i++) {
pdfDoc.getPage(i + 1).then((page) => {
const canvas = this.canvas.toArray()[page.pageIndex].nativeElement;
this.renderPdfPageToCanvas(page, canvas).then(() => {
this.pages[page.pageIndex] = canvas.toDataURL('image/png');
});
});
}
}
renderPdfPageToCanvas(page: pdfjsLib.PDFPageProxy, canvas: HTMLCanvasElement): pdfjsLib.PDFPromise<pdfjsLib.PDFPageProxy> {
const viewport = page.getViewport({ scale: 1.0 });
const height = viewport.height;
const width = viewport.width;
canvas.height = height;
canvas.width = width;
const renderContext = {
canvasContext: canvas.getContext('2d'),
viewport: viewport
};
return page.render(renderContext).promise;
}
}
package.json
{
...
"dependencies": {
...
"#angular/core": "^9.1.11",
"pdfjs-dist": "2.3.200"
},
"devDependencies": {
...
"#types/pdfjs-dist": "2.1.3"
}
}
I've checked every question related to my problem in Stack Overflow and couldn't find a way to fix it.
What I am trying to do is; User tries to upload images, they get resized in the client-side and then they get uploaded. I've used Pica library. Everything works fine for one file. However, when I changed it to multiple files, I get duplicates of the last image.
What's happening: Loop 1 thru N times -> resizeImg N times
Ideal Solution: Loop 1 -> resizeImg(1) -> Loop 2 -> resizeImg(2)
Any help would be appreciated.
My code is below:
function resizeImg(source) {
img = new Image;
img.src = source;
img.onload = function() {
width = img.naturalWidth;
height = img.naturalHeight;
ratio = Math.min(targetWidth / width, targetHeight / height);
resizer = window.pica();
canvas = document.createElement("canvas");
ctx = canvas.getContext("2d");
ctx.canvas.width = width * ratio;
ctx.canvas.height = height * ratio;
resizer.resize(img, canvas, {
quality: 3,
alpha: true,
unsharpAmount: 0
}).then(result => resizer.toBlob(result, 'image/jpeg', 0.90)).then(blob => imgBlobArray.push(blob)).then(function() {
console.log(i);
console.log(imgBlobArray);
});
};
}
document.getElementById('select').onchange = function(evt) {
for (i = 0; i < this.files.length; i++) {
resizeImg(window.URL.createObjectURL(this.files[i]));
}
}
The problem is that you don't have a separate binding of img for each call of resizeImg - you don't have var or const or let in front of the first use of img. You're implicitly creating a global variable. So, to the interpreter, it looks something like
var img;
function resizeImg(source) {
img = new Image;
img.src = source;
img.onload = function() {
img is getting continuously reassigned. So, after all iterations, img will end up being only the last img created with resizeImg - the references to the other Images have been lost.
So, always declare variables explicitly to ensure each call of resizeImg has a separate img binding. Do the same with all your other variables as well, or they'll be implicitly global.
function resizeImg(source) {
const img = new Image;
img.src = source;
img.onload = function() {
const width = img.naturalWidth;
const height = img.naturalHeight;
const ratio = Math.min(targetWidth / width, targetHeight / height);
const resizer = window.pica();
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
ctx.canvas.width = width * ratio;
ctx.canvas.height = height * ratio;
resizer.resize(img, canvas, {
quality: 3,
alpha: true,
unsharpAmount: 0
}).then(result => resizer.toBlob(result, 'image/jpeg', 0.90)).then(blob => imgBlobArray.push(blob)).then(function() {
console.log(i);
console.log(imgBlobArray);
});
};
}
document.getElementById('select').onchange = function(evt) {
for (let i = 0; i < this.files.length; i++) {
resizeImg(window.URL.createObjectURL(this.files[i]));
}
}
You could try defining a recursive function like so
function resizeImgRec(files, i) {
if (i >= files.length)
return;
...
img.onload = function() {
...
resizer.resize(img, canvas, {
...
}).then(result => resizer.toBlob(result, 'image/jpeg', 0.90)).then(blob => imgBlobArray.push(blob)).then(function() {
console.log(i);
console.log(imgBlobArray);
resizeImg(files, i + 1);
});
};
}
document.getElementById('select').onchange = function(evt) {
resizeImgRec(this.files, 0);
}
This way the next resizeImg will only execute after the last promise is resolved.
To fill a canvas with several images i am using the following code:
<canvas id="myCanvas"></canvas>
<script>
function loadImages(sources, callback) {
var images = {};
var loadedImages = 0;
var numImages = 0;
// get num of sources
for ( var src in sources) {
numImages++;
}
for ( var src in sources) {
images[src] = new Image();
images[src].onload = function() {
if (++loadedImages >= numImages) {
callback(images);
}
};
images[src].src = sources[src];
}
}
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
fitToContainer(canvas);
var sources = {
darthVader : 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg',
yoda : 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg'
};
loadImages(sources, function(images) {
context.drawImage(images.darthVader, 0,0);
context.drawImage(images.yoda, 0, 0);
});
function fitToContainer(canvas) {
canvas.style.width = '100%';
canvas.style.height = '100%';
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
}
</script>
Although this is in fact filling the canvas with images, i am not able to position the images in order not to overlap them. I dont know ahead of time the sizes of pictures. Is there any library or framework than can easily do this for me or what direction can i go?
And the canvas has a limited size since it is inside a parent html element.
Just keep track of the accumulated width of your images.
Then draw the next image to the right of that accumulated width
loadImages(sources, function(images) {
var nextX=0;
context.drawImage(images.darthVader, nextX,0);
nextX+=images.darthVader.width;
context.drawImage(images.yoda, nextX, 0);
nextX+=images.yoda.width;
// ...and so on...
});
I am trying to read an entire .pdf Document using PDF.js and then render all the pages on a single canvas.
My idea: render each page onto a canvas and get the ImageData (context.getImageData()), clear the canvas do the next page. I store all the ImageDatas in an array and once all pages are in there I want to put all the ImageDatas from the array onto a single canvas.
var pdf = null;
PDFJS.disableWorker = true;
var pages = new Array();
//Prepare some things
var canvas = document.getElementById('cv');
var context = canvas.getContext('2d');
var scale = 1.5;
PDFJS.getDocument(url).then(function getPdfHelloWorld(_pdf) {
pdf = _pdf;
//Render all the pages on a single canvas
for(var i = 1; i <= pdf.numPages; i ++){
pdf.getPage(i).then(function getPage(page){
var viewport = page.getViewport(scale);
canvas.width = viewport.width;
canvas.height = viewport.height;
page.render({canvasContext: context, viewport: viewport});
pages[i-1] = context.getImageData(0, 0, canvas.width, canvas.height);
context.clearRect(0, 0, canvas.width, canvas.height);
p.Out("pre-rendered page " + i);
});
}
//Now we have all 'dem Pages in "pages" and need to render 'em out
canvas.height = 0;
var start = 0;
for(var i = 0; i < pages.length; i++){
if(canvas.width < pages[i].width) canvas.width = pages[i].width;
canvas.height = canvas.height + pages[i].height;
context.putImageData(pages[i], 0, start);
start += pages[i].height;
}
});
So from the way I understnad thing this should work, right?
When I run this I end up with the canvas that is big enought to contain all the pages of the pdf but doesn't show the pdf...
Thank you for helping.
The PDF operations are asynchronous at all stages. This means you also need to catch the promise at the last render as well. If you not catch it you will only get a blank canvas as the rendering isn't finished before the loop continues to the next page.
Tip: I would also recommend that you use something else than getImageData as this will store uncompressed bitmap, for example the data-uri instead which is compressed data.
Here is a slightly different approach eliminating the for-loop and uses the promises better for this purpose:
LIVE FIDDLE
var canvas = document.createElement('canvas'), // single off-screen canvas
ctx = canvas.getContext('2d'), // to render to
pages = [],
currentPage = 1,
url = 'path/to/document.pdf'; // specify a valid url
PDFJS.getDocument(url).then(iterate); // load PDF document
/* To avoid too many levels, which easily happen when using chained promises,
the function is separated and just referenced in the first promise callback
*/
function iterate(pdf) {
// init parsing of first page
if (currentPage <= pdf.numPages) getPage();
// main entry point/function for loop
function getPage() {
// when promise is returned do as usual
pdf.getPage(currentPage).then(function(page) {
var scale = 1.5;
var viewport = page.getViewport(scale);
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: ctx,
viewport: viewport
};
// now, tap into the returned promise from render:
page.render(renderContext).then(function() {
// store compressed image data in array
pages.push(canvas.toDataURL());
if (currentPage < pdf.numPages) {
currentPage++;
getPage(); // get next page
}
else {
done(); // call done() when all pages are parsed
}
});
});
}
}
When you then need to retrieve a page you simply create an image element and set the data-uri as source:
function drawPage(index, callback) {
var img = new Image;
img.onload = function() {
/* this will draw the image loaded onto canvas at position 0,0
at the optional width and height of the canvas.
'this' is current image loaded
*/
ctx.drawImage(this, 0, 0, ctx.canvas.width, ctx.canvas.height);
callback(); // invoke callback when we're done
}
img.src = pages[index]; // start loading the data-uri as source
}
Due to the image loading it will be asynchronous in nature as well which is why we need the callback. If you don't want the asynchronous nature then you could also do this step (creating and setting the image element) in the render promise above storing image elements instead of data-uris.
Hope this helps!
I can’t speak to the part of your code that renders the pdf into a canvas, but I do see some problems.
Every resetting canvas.width or canvas.height automatically clears the canvas contents. So in the top section, your clearRect is not needed because the canvas is cleared by canvas.width prior to your every page.render.
More importantly, in the bottom section, all your previous pdf drawings are cleared by every canvas resizing (oops!).
getImageData() gets an array where each pixel is represented by 4 consecutive elements of that array (red then green then blue then alpha). Since getImageData() is an array, so it doesn’t have a pages[i].width or pages[i].height—it only has a pages[i].length. That array length cannot be used to determine widths or heights.
So to get you started, I would start by changing your code to this (very, very untested!):
var pdf = null;
PDFJS.disableWorker = true;
var pages = new Array();
//Prepare some things
var canvas = document.getElementById('cv');
var context = canvas.getContext('2d');
var scale = 1.5;
var canvasWidth=0;
var canvasHeight=0;
var pageStarts=new Array();
pageStarts[0]=0;
PDFJS.getDocument(url).then(function getPdfHelloWorld(_pdf) {
pdf = _pdf;
//Render all the pages on a single canvas
for(var i = 1; i <= pdf.numPages; i ++){
pdf.getPage(i).then(function getPage(page){
var viewport = page.getViewport(scale);
// changing canvas.width and/or canvas.height auto-clears the canvas
canvas.width = viewport.width;
canvas.height = viewport.height;
page.render({canvasContext: context, viewport: viewport});
pages[i-1] = context.getImageData(0, 0, canvas.width, canvas.height);
// calculate the width of the final display canvas
if(canvas.width>maxCanvasWidth){
maxCanvasWidth=canvas.width;
}
// calculate the accumulated with of the final display canvas
canvasHeight+=canvas.height;
// save the "Y" starting position of this pages[i]
pageStarts[i]=pageStarts[i-1]+canvas.height;
p.Out("pre-rendered page " + i);
});
}
canvas.width=canvasWidth;
canvas.height = canvasHeight; // this auto-clears all canvas contents
for(var i = 0; i < pages.length; i++){
context.putImageData(pages[i], 0, pageStarts[i]);
}
});
Alternatively, here’s a more traditional way of accomplishing your task:
Use a single “display” canvas and allow the user to “page through” each desired page.
Since you already start by drawing each page into a canvas, why not keep a separate, hidden canvas for each page. Then when the user wants to see page#6, you just copy the hidden canvas#6 onto your display canvas.
The Mozilla devs use this approach in their pdfJS demo here: http://mozilla.github.com/pdf.js/web/viewer.html
You can check out the code for the viewer here: http://mozilla.github.com/pdf.js/web/viewer.js
You can pass the number page to the promises , get that page canvas data and render in the right order on canvas
var renderPageFactory = function (pdfDoc, num) {
return function () {
var localCanvas = document.createElement('canvas');
///return pdfDoc.getPage(num).then(renderPage);
return pdfDoc.getPage(num).then((page) => {
renderPage(page, localCanvas, num);
});
};
};
var renderPages = function (pdfDoc) {
var renderedPage = $q.resolve();
for (var num = 1; num <= pdfDoc.numPages; num++) {
// Wait for the last page t render, then render the next
renderedPage = renderedPage.then(renderPageFactory(pdfDoc, num));
}
};
renderPages(pdf);
Complete example
function renderPDF(url, canvas) {
var pdf = null;
PDFJS.disableWorker = true;
var pages = new Array();
var context = canvas.getContext('2d');
var scale = 1;
var canvasWidth = 256;
var canvasHeight = 0;
var pageStarts = new Array();
pageStarts[0] = 0;
var k = 0;
function finishPage(localCanvas, num) {
var ctx = localCanvas.getContext('2d');
pages[num] = ctx.getImageData(0, 0, localCanvas.width, localCanvas.height);
// calculate the accumulated with of the final display canvas
canvasHeight += localCanvas.height;
// save the "Y" starting position of this pages[i]
pageStarts[num] = pageStarts[num -1] + localCanvas.height;
if (k + 1 >= pdf.numPages) {
canvas.width = canvasWidth;
canvas.height = canvasHeight; // this auto-clears all canvas contents
for (var i = 0; i < pages.length; i++) {
context.putImageData(pages[i+1], 0, pageStarts[i]);
}
var img = canvas.toDataURL("image/png");
$scope.printPOS(img);
}
k++;
}
function renderPage(page, localCanvas, num) {
var ctx = localCanvas.getContext('2d');
var viewport = page.getViewport(scale);
// var viewport = page.getViewport(canvas.width / page.getViewport(1.0).width);
// changing canvas.width and/or canvas.height auto-clears the canvas
localCanvas.width = viewport.width;
/// viewport.width = canvas.width;
localCanvas.height = viewport.height;
var renderTask = page.render({canvasContext: ctx, viewport: viewport});
renderTask.then(() => {
finishPage(localCanvas, num);
});
}
PDFJS.getDocument(url).then(function getPdfHelloWorld(_pdf) {
pdf = _pdf;
var renderPageFactory = function (pdfDoc, num) {
return function () {
var localCanvas = document.createElement('canvas');
///return pdfDoc.getPage(num).then(renderPage);
return pdfDoc.getPage(num).then((page) => {
renderPage(page, localCanvas, num);
});
};
};
var renderPages = function (pdfDoc) {
var renderedPage = $q.resolve();
for (var num = 1; num <= pdfDoc.numPages; num++) {
// Wait for the last page t render, then render the next
renderedPage = renderedPage.then(renderPageFactory(pdfDoc, num));
}
};
renderPages(pdf);
});
}
I'm working on a proof of concept on an HTML5 canvas. I was able to get this working like a charm in Chrome and IE9, but in Firefox 4 I'm getting constant flicker as it redraws the canvas. I've tried a few techniques mentioned on this site like double buffering but I'm still getting a large amount of flicker. Any insight on this would be appreciated!
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
body
{
margin:0px;
padding:0px;
text-align:center;
}
canvas
{
outline:0;
border:1px solid #000;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
}
</style>
<script type="text/javascript">
var canvasWidth = 640;
var thisXPos = 0;
var canvasHeight = 820;
var thisYPos = 0;
var canvas = null;
var context = null;
var gLoop = null;
var rain = [];
var rainImg = "images/raindrop.gif";
var bgImg = null;
var i;
for (i = 0; i < howManyLetters; i++)
{
rain.push([Math.floor(Math.random() * canvasWidth), Math.floor(Math.random() * canvasHeight),rainImg]);
}
var DrawRain = function()
{
for (i = 0; i < 10; i++)
{
thisXPos = rain[i][0];
thisYPos = rain[i][1];
imgSrc = rain[i][2];
letterImg = new Image();
letterImg.setAtX = thisXPos;
letterImg.setAtY = thisYPos;
letterImg.onload = function()
{
context.drawImage(this, this.setAtX, this.setAtY);
}
letterImg.src = imgSrc;
}
};
var MoveRain = function(e)
{
for (i = 0; i < 10; i++)
{
if ((rain[i][1] - 5) > canvasHeight)
{
randomnumber = Math.floor(Math.random()*26);
rain[i][0] = Math.random() * canvasWidth;
rain[i][1] = 0;
rain[i][2] = rainImg;
}
else
{
rain[i][1] += e;
}
}
};
var clear = function()
{
context.beginPath();
context.rect(0, 0, canvasWidth, canvasHeight);
context.closePath();
bgImg = new Image();
bgImg.src = "images/bg.png";
bgImg.onload = function()
{
context.drawImage(bgImg,0,0);
}
}
var GameLoop = function()
{
context.save();
clear();
MoveRain(1);
DrawRain();
context.restore();
gLoop = setTimeout(GameLoop, 10);
}
function loadGame()
{
canvas = document.getElementById("gameCanvas");
context = canvas.getContext("2d");
canvas.width = canvasWidth;
canvas.height = canvasHeight;
GameLoop();
}
</script>
</head>
<body onload="loadGame();">
<canvas id="gameCanvas"></canvas>
</body>
</html>
I have distilled your example down to this:
http://jsfiddle.net/sPm3b/6/
And it works very fast in Firefox and Chrome.
So we know that the problem lies in the images.
You need to optimize how they are created and loaded. Right now, each clear() creates a new image and waits for it to load! That image should be created only once, in your loadGame() and then reused over and over.
Same exact deal with letterImg in DrawRain(). Move the creation of it to loadGame()
That will probably fix the problem.
EDIT:
like this:
At the top add:
var letterImg = new Image();
var bgImg = new Image();
Then
function loadGame()
{
canvas = document.getElementById("gameCanvas");
context = canvas.getContext("2d");
canvas.width = canvasWidth;
canvas.height = canvasHeight;
bgImg.src = "images/bg.png";
letterImg.src = "images/raindrop.gif";
// optional: wait for them to load here
GameLoop();
}
Then drawRain, for example, would look like this:
var DrawRain = function()
{
for (i = 0; i < 10; i++)
{
thisXPos = rain[i][0];
thisYPos = rain[i][1];
context.drawImage(letterImg, thisXPosX, thisYPos); // letterImg was already constructed, no need to make it again
}
};
In complement to Simon Sarris response. I've used a 'double canvas' technique to avoid screen fickering with heavy canvas.
The way it works is always have 2 version of the canvas, one in DOM, one outside, and always draw on the one which is not in DOM. I use it with a redraw queue.
here's a part of a working code
(...)
clear: function() {
//rotating on 2 canvas, one for draw (outside DOM) one for show
var self = this;
if (null == self.canvasbackup) {
var tmpcanvas = self.canvas.clone(true);
self.canvasbackup = self.canvas;
self.canvas=tmpcanvas;
} else {
var tmpcanvas = self.canvasbackup;
self.canvasbackup = self.canvas;
self.canvas=tmpcanvas;
}
self.ctx = self.canvas[0].getContext('2d');
self.ctx.clearRect( 0, 0, self.options.width, self.options.height );
jQuery.each(self.elements,function(idx,elt){
// custom function: my elements need to know which canvas they depends on
elt.reconnectCanvas(self.canvas,self.ctx);
});
},
inDOM: function() {
var self = this;
if(null==self.canvasbackup) {
//1st time need to get all things in DOM
self.canvas.appendTo(self.div);
self.div.appendTo(self.container);
} else {
// remove current shown canvas
self.connectHuman();
self.canvasbackup.remove();
// loosing some events here...
self.canvas.appendTo(self.div);
// div is already in DOM, we are in redraw
}
},
redraw: function() {
var self = this;
self.clear();
jQuery.each(self.elements,function(idx,elt){
elt.draw();
elt.enddraw();
});
self.inDOM();
}
(...)