https://github.com/mat-sz/brightroom

📷 Embeddable image editor for the modern web (TypeScript).
https://github.com/mat-sz/brightroom

canvas image image-processing javascript javascript-library photo-editing typescript typescript-library

Last synced: 5 days ago
JSON representation

📷 Embeddable image editor for the modern web (TypeScript).

• Host: GitHub
• URL: https://github.com/mat-sz/brightroom
• Owner: mat-sz
• License: bsd-3-clause-clear
• Created: 2020-05-16T13:46:04.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2020-05-18T16:16:06.000Z (over 4 years ago)
• Last Synced: 2024-11-01T23:30:31.658Z (15 days ago)
• Topics: canvas, image, image-processing, javascript, javascript-library, photo-editing, typescript, typescript-library
• Language: TypeScript
• Size: 940 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Brightroom

Embeddable image editor for the modern web (TypeScript). [NPM](https://npmjs.com/package/brightroom)

See [imtool](https://github.com/mat-sz/imtool) for a simple TypeScript image manipulation library with no GUI.

## Installation

### NPM/Yarn

Brightroom can be installed by using either yarn or npm:

```

yarn add brightroom

// ...or

npm install brightroom

```

Then it can be included in a project using ES import statements:

```js

// Important! Don't forget the CSS.

import 'brightroom/dist/brightroom.esm.css';

import Brightroom from 'brightroom';

```

### Unpkg

```html

```

### Hosting

The files necessary for self-hosting can be found in the [dist](https://github.com/mat-sz/brightroom/tree/master/dist) directory. For non ESM projects, the CJS version (brightroom.cjs.production.min.js) will be the right one.

## Usage

Brightroom needs to be mounted to a container element. It will detect and adapt itself to the parent element's height and width. Setting an explicit size on the container element is recommended.

```js

import 'brightroom/dist/brightroom.esm.css';

import Brightroom from 'brightroom';

const brightroom = new Brightroom({

  image: './example.jpg',

  container: document.getElementById('root')!

});

// Setting initial options is not required, in fact Brightroom has an API.

brightroom.setImage('image.png');

brightroom.unmount();

brightroom.mount(document.getElementById('newContainer')!);

```