Это простой генератор глупых картинок c кешированием. Работает так же просто как камень 🪨.

import { ImageManager } from "dummyimagejs";

// Создаем менеджер, он позволет гарантировать
// что одно и то же изображение создастся лишь однажды
const imageManager = new ImageManager();

// Создаем само изображение, если не передавать параметры
// то будут использоваться параметры по умолчанию
const image = imageManager.createImage();

// Изображение будет создано и закешировано
image.asBase64() // data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...

// Вернется закешированое изображение
image.asBase64() // data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...

Мы получим

А пример ниже, генерирует картинку из шапки

import { ImageManager } from "dummyimagejs";

const imageManager = new ImageManager();
const image = imageManager.createImage({
  width: 1012,
  height: 300,
  fontWieght: 700,
  color: "#000000",
  backgroundColor: "#f7e017",
  text: "🎉  DummyImageJS  🎉"
});

Установка 🪄

npm -i dummyimagejs

Документация 📖

Image

interface ImageParams {
  width?: number;
  height?: number;
  text?: string;
  fontFace?: string;
  fontWieght?: FontWeight;
  color?: string;
  backgroundColor?: string;
}

class Image {
    constructor(params?: ImageParams)

Сам по себе класс [Image] реализует кеширование сгенерированного изображения при вызове метода asBase64() или asBlob(), однако это кеширование имеет мало смысла, если мы можем созать десяток инстансов [Image], поэтому нам нужен менеджер, гарантирующий создание лишь одного инстанса [Image] с идентичными параметрами.

Исходя из логических соображений Image хранит лишь один закешированный объект одновременно.

image = new Image();

// Сгенерирует base64 и закеширует
image.asBase64()

// Сгенерирует blob и закеширует
image.asBlob()

// Выгрузит blob из памяти,
// сгенерирует base64 и закеширует
image.asBase64()

Геттеры

key

public get key(): string

Методы

asBase64

public async asBase64(): Promise<string | undefined>

asBlob

public async asBlob(): Promise<string | undefined>

beforeDelete

public beforeDelete(): void

Статические методы

getKey

public static getKey(params?: ImageParams): string

ImageManager

class ImageManager extends Manager<Image>

Реализует кеширование экземпляров [Image], [ImageManager] — синглтон, это позволяет гарантировать кеширование единственной копии изображения в любом месте.

Методы

createImage

interface ImageParams {
  width?: number;
  height?: number;
  text?: string;
  fontFace?: string;
  fontWieght?: FontWeight;
  color?: string;
  backgroundColor?: string;
}

createImage (params?: ImageParams): Image

deleteImage

deleteImage (key: string): boolean

deleteAll

deleteAll ():  void

Manager

abstract class Manager<T> extends Singleton implements Map<string, T>

Возможно у вас возникнет потребность в создании своего собственного менеджера, сделать это можно наследуясь от класса [Manager] подробнее в разделе Создание собственного менеджера

Примеры

Реализация собственного менеджера

import { Manager, Image } from "dummyimagejs";
import { ImageParams } from "dummyimagejs/types/Image";

interface TemporalyCachedImage {
  image: Image;
  timer: number;
}

export default class TemporalyCachedImageManager extends
  Manager<TemporalyCachedImage> {
  public createImage(params?: ImageParams): Image {
    const key = Image.getKey(params);
    let cached = this.get(key);

    if (!cached) {
      cached = {
        image: new Image(params),
        timer: setTimeout(() => {
          this.deleteImage(key);
        }, 10000)
      };

      this.set(key, cached);
    }

    return cached.image;
  }

  public deleteImage(key: string): boolean {
    const cached = this.get(key);

    if (cached) {
      cached.image?.beforeDelete();

      return this.delete(key);
    }

    return false;
  }

  public deleteAll(): void {
    this.forEach(({ image }) => image.beforeDelete());

    this.clear();
  }
}

Written with StackEdit.