Ts-image-viewer NPM

ts-image-viewer 🖼️

Features

Getting started

Installation into your project

npm install ts-image-viewer

Running the simplest example

import {AnnotEventDetail, TsImageViewer, ImageLoadInfo } from "./ts-image-viewer";

async function run(): Promise<void> {  
  const viewer = new TsImageViewer({
    containerSelector: "#your-html-container-selector",
    userName: "your_username",
    fileButtons: ["open", "close"],
    annotChangeCallback: (detail: AnnotEventDetail) => console.log(detail.type),
  });

  // open some placeholder images for testing purposes 
  const infos: ImageLoadInfo[] = [];
  for (let i = 0; i < 100; i++) {
    infos.push({
      type: "URL",
      data: `https://via.placeholder.com/4000x3000/aaaaaa/fff.png?text=image${i}`,
      uuid: i + "",
    });
  } 
  viewer.openImagesAsync(infos);
} 

run();

⚠️for viewer to function properly its container element must have relative, absolute or fixed position!

⚠️saving images loaded using cross-origin requests is limited! you can read more on this here: https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image#security_and_tainted_canvases

Changing the color scheme

To apply a custom color scheme to the viewer, assign color values to the following CSS variables. Default values are used for omitted variables.

:root {
  --tsimage-color-primary: rgba(77, 88, 115, 1);
  --tsimage-color-primary-tr: rgba(77, 88, 115, 0.9);
  --tsimage-color-secondary: rgb(113, 133, 150);
  --tsimage-color-secondary-tr: rgba(113, 133, 150, 0.9);
  --tsimage-color-accent: rgba(64, 72, 95, 1);
  --tsimage-color-shadow: rgba(0, 0, 0, 0.75);
  --tsimage-color-bg: rgba(128, 128, 128,1);
  --tsimage-color-fg-primary: rgba(255, 255, 255, 1);
  --tsimage-color-fg-secondary:rgba(187, 187, 187, 1);
  --tsimage-color-fg-accent: rgb(255, 204, 0);
  --tsimage-color-text-selection: rgba(104, 104, 128, 0.3);
}