Overview

This project contains a set of examples of using library image-in-browser.

All tests are located in the examples folder.

Files with examples are divided into sections according to the subject of the example.

Each example is a separate Typescript file and is independent from other examples.

NOTE: There is also a _utils folder. Unlike other folders, it doesn't contain examples, but stores some helpers and commonly used functions that are used as syntactic sugar in the examples.

How to run and debug?

To run the examples, it is most convenient to use the VSCode IDE, for which the corresponding launch scripts have already been prepared.

To run the example:

• open the file with the example you want to run or debug
• press F5 in VSCode

The environment will launch the build process in the background, and then launch the currently open example for execution and debugging.

Quick links to examples

Getting basic information about image

Getting basic information about a PNG image

Getting basic information about a PSD image

Getting basic information about a PVR image

Getting basic information about a WebP image

Displaying a MemoryImage on a canvas

Displaying a PNG image on a canvas

Conversion

Сonversion from PNG to BMP

Сonversion from PNG to GIF

Сonversion from PNG to ICO

Сonversion from PNG to JPG

Drawing

Overlaying images on top of each other

Drawing lines on the image

Drawing pixels of different colors

Drawing filled rectangles

Filling the entire image with a solid color

Working with EXIF data

Writing and reading EXIF data of JPG image

Filters

Applying a contrast filter

Applying a monochrome filter

Applying a sepia filter

MemoryImage features

Getting MemoryImage bytes in a specific order

Iterating over MemoryImage pixels

Transformations

Cropping images in a circle shape

Flip image

Rotating an image

Links

Link to the project these examples are for:

image-in-browser (GitHub)