canvas-thumbnail-cache

Draw images into a canvas square grid for fast retrieval at a thumbnail size.

Installation

npm install canvas-thumbnail-cache

Usage

import CanvasThumbnailCache from "canvas-thumbnail-cache";
import createCanvasContext from "canvas-context";
import AsyncPreloader from "async-preloader";

const { canvas, context } = createCanvasContext("2d");
document.body.appendChild(canvas);

const COUNT = 50;

const thumbnailsCache = new CanvasThumbnailCache({
  context,
  slotSize: 128,
});

(async () => {
  const items = Array.from({ length: COUNT }, (_, index) => {
    return {
      id: index,
      src: `https://source.unsplash.com/collection/155977/${index}`,
      loader: "Image",
    };
  });

  items.map(async (item) => {
    const image = await AsyncPreloader.loadItem(item);

    thumbnailsCache.add(item.id, image);
  });
})();

API

Classes

CanvasThumbnailCache

Typedefs

Slot : Object

Options : Object

CanvasThumbnailCache

Kind: global class

• CanvasThumbnailCache
  • new CanvasThumbnailCache([options])
  • .reset()
  • .add(key, source) ⇒ Slot
  • .get(key) ⇒ Slot
  • .remove(key)

new CanvasThumbnailCache([options])

Creates an instance of CanvasThumbnailCache.

canvasThumbnailCache.reset()

Reset and clear the canvas size and empty the thumbnails cache.

Kind: instance method of CanvasThumbnailCache

canvasThumbnailCache.add(key, source) ⇒ Slot

Add an image (or anything that can be draw into a 2D canvas) to the cache and return its slot.

Kind: instance method of CanvasThumbnailCache

canvasThumbnailCache.get(key) ⇒ Slot

Get a slot

The slot can also be retrieved with get and the key passed when calling thumbnailsCache.add(key, source).

Kind: instance method of CanvasThumbnailCache

canvasThumbnailCache.remove(key)

Remove the specified image from the cache and clear its slot.

Kind: instance method of CanvasThumbnailCache

Slot : Object

Kind: global typedef Properties

Options : Object

Kind: global typedef Properties

License

MIT. See license file.