Skip to content

Superb flip book (for pdf's images, etc) with animated pages using canvas

License

Notifications You must be signed in to change notification settings

theproductiveprogrammer/flipbook-viewer

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Flipbook Viewer

Amazing flip book component with animated pages.

demo

This is a tiny library that can show flip books from any source (including PDF’s, images, etc).

Advantages

  1. Tiny (18 Kb). For comparison, the amazing page-flip is 10 Mb (x1000 times bigger!).
  2. Can use any input as a book simply by plugging in a “book provider”. An example PDF book using the amazing pdfjs from Mozilla can be found in the test folder—book-pdf.js (referenced usage: test-pdf.js)
  3. Supports Panning, Zooming, Liking, Sharing, along with page turning effects.
  4. Raises events to track which pages are being viewed by user.

Usage

Below shows the flip book on the given div with the id div-id:

'use strict'

import { init as flipbook } from 'flipbook-viewer';

...

flipbook(book, 'div-id', (err, viewer) => {
  if(err) console.error(err);

  console.log('Number of pages: ' + viewer.page_count);
  viewer.on('seen', n => console.log('page number: ' + n));

  next.onclick = () => viewer.flip_forward();
  prev.onclick = () => viewer.flip_back();
  zoom.onclick = () => viewer.zoom();

});

The viewer can show any flip book. All you need to do is provide a book interface:

{
  numPages: () => {
    /* return number of pages */
  },
  getPage: (num, cb) => {
    /* return page number 'num'
     * in the callback 'cb'
     * as any CanvasImageSource:
     * (CSSImageValue, HTMLImageElement, 
     *  SVGImageElement, HTMLVideoElement,
     *  HTMLCanvasElement, ImageBitmap,
     *  OffscreenCanvas)
     */
  }
}

Options

An optional opts parameter can be passed in to change the UI:

const opts = {
  backgroundColor: "#353535",
  boxColor: "#353535",
  width: 800,
  height: 600,
}

flipbook(book, 'div-id', opts, (err, viewer) => ...

Events

You can listen on the viewer for which pages were seen:

viewer.on('seen', n => ...)

Programmatic API

The returned viewer can be used to programmatically control the viewer:

viewer.flip_forward()
viewer.flip_back()
viewer.zoom()

Single Page View

Finally, sometimes it makes sense to just show the book as a simple, scrollable view. To pass in only a singlepage:true option:

flipbook(book, 'div-id', {singlepage:true}, (err, viewer) => ...

This will generate a series of canvases with class="flipbook__page" and id="flipbook__pgnum_<n>" that you can style using CSS. The single page view will raise the same seen event that the flipbook viewer does for tracking which pages the user actually flips through.

The single page viewer is currently experimental and very simple. It should work for many PDF's but is not optimized for handling PDF's with a large number of pages.

Enjoy!


About

Superb flip book (for pdf's images, etc) with animated pages using canvas

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published