ts-pdf-image-manager

A TypeScript library for managing images, editing them, and exporting to PDF — all via a simple API.

Features

• Simple API — Initialize with a single container ID
• Drag & Drop reorder — Native HTML5 API for reordering images
• Image Editor — Full-screen dialog with Crop, Crop Remaining, Rotate, Flip, Mirror, Undo, Reset
  • Save and Save & Close buttons
  • Previous/Next navigation to edit multiple images without closing
  • Unsaved changes detection with confirmation dialog
  • Toast notification on save
• PDF Export — Pure TypeScript binary PDF generation
• File modal — Drag-and-drop or browse to add files
  • Option to skip modal and show file dialog directly
• Thumbnail Actions — Edit and delete icons on hover (optional)
• Scoped styles — CSS with pim- prefix, injected programmatically
• TypeScript support — Full type definitions included

Installation

npm install ts-pdf-image-manager

Quick Start

import { TsPdfImageManager } from 'ts-pdf-image-manager';

const pdfManager = new TsPdfImageManager();

// Initialize the library
pdfManager.init('my-container', {
  onPdfGenerated: (blob: Blob) => {
    const url = URL.createObjectURL(blob);
    window.open(url, '_blank');
  },
  onFilesChanged: (files) => {
    console.log('Files:', files.length);
  }
});

// Clean up when done
pdfManager.destroy('my-container');

HTML Setup

<div id="my-container" style="height: 500px; border: 1px solid #ddd;"></div>

API

TsPdfImageManager

init(containerId: string, options?: PdfManagerOptions): ManagerShell | undefined

Initialize the library inside the given element ID.

destroy(containerId: string): void

Tear down the library, remove all DOM and injected styles.

getInstance(containerId: string): ManagerShell | undefined

Get the manager instance for a specific container.

updateOptions(containerId: string, options: Partial<PdfManagerOptions>): void

Update options for an existing instance.

getFiles(containerId: string): PdfImageItem[]

Returns current list of files managed by the given container.

edit(containerId: string): void

Open the editor for the selected image.

add(containerId: string): void

Open the file add modal.

remove(containerId: string): void

Remove the selected image.

removeAll(containerId: string, force?: boolean): void

Remove all images from the container.

addFromDataUrl(containerId: string, dataUrl: string, name?: string): void

Add an image from a base64 data URL string.

// Example with base64 data URL
const base64DataUrl = 'data:image/png;base64,iVBORw0KGgoAAAANS...';
pdfManager.addFromDataUrl('my-container', base64DataUrl, 'my-image.png');

// Example with dynamic format
const dataUrl = 'data:image/' + format + ';base64,' + base64Payload;
pdfManager.addFromDataUrl('my-container', dataUrl, 'scanned-image.' + format);

PdfManagerOptions

interface PdfManagerOptions {
  onPdfGenerated?: (blob: Blob) => void;
  onFilesChanged?: (files: PdfImageItem[]) => void;
  acceptedTypes?: string[];        // default: image/* + application/pdf
  maxFiles?: number;               // default: unlimited
  showToolbar?: boolean;           // default: true
  showLeftPanelAdd?: boolean;      // default: true
  showFileDetails?: boolean;       // default: true
  showDragAndDropModal?: boolean; // default: true (show modal) / false (direct file dialog)
  showThumbnailActions?: boolean;  // default: false (show edit/delete icons on hover)
}

PdfImageItem

interface PdfImageItem {
  id: string;
  name: string;
  type: 'image' | 'document';
  originalFile?: File;  // optional when adding from data URL
  dataUrl: string;
  editedDataUrl?: string;  // set after editing
  order: number;
}

Usage Example

import { TsPdfImageManager } from 'ts-pdf-image-manager';

class MyApp {
  private pdfManager = new TsPdfImageManager();

  constructor() {
    this.initialize();
  }

  private initialize() {
    const container = document.getElementById('pdf-manager');
    if (!container) return;

    this.pdfManager.init('pdf-manager', {
      onPdfGenerated: (blob: Blob) => {
        // Handle generated PDF
        this.downloadPdf(blob);
      },
      onFilesChanged: (files) => {
        // Handle file changes
        console.log('Current files:', files);
      },
      acceptedTypes: ['image/*', 'application/pdf'],
      maxFiles: 10,
      showDragAndDropModal: false,  // Skip modal, show file dialog directly
      showThumbnailActions: true     // Show edit/delete icons on thumbnail hover
    });
  }

  private downloadPdf(blob: Blob) {
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'document.pdf';
    a.click();
    URL.revokeObjectURL(url);
  }

  destroy() {
    this.pdfManager.destroy('pdf-manager');
  }
}

Advanced Features

Thumbnail Actions

Enable edit and delete icons on thumbnail hover:

pdfManager.init('container', {
  showThumbnailActions: true  // Show edit/delete icons on hover
});

Direct File Dialog

Skip the drag-and-drop modal and show the file dialog directly:

pdfManager.init('container', {
  showDragAndDropModal: false  // Show file dialog instead of modal
});

Browser Support

Any modern browser with support for:

• Canvas API
• FileReader API
• HTML5 Drag and Drop
• ES2020

Dependencies

• jQuery (peer dependency)

Development

# Install dependencies
npm install

# Build the library
npm run build

# The built files will be in the dist/ directory

License

MIT © 2024

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.