diff --git a/docs/Getting started.md b/docs/Getting started.md deleted file mode 100644 index 2f0121d..0000000 --- a/docs/Getting started.md +++ /dev/null @@ -1,178 +0,0 @@ ---- -sidebar_position: 0 ---- - -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -# Getting started - -Image-JS is a versatile and powerful library written in TypeScript for image processing and analysis. It gives a user a comprehensive set of tools and algorithms for manipulating, enhancing, and understanding images not only within Node.js but also across all popular browsers. - -### Installation - -Installation of ImageJS is straight-forward. Use terminal to install the package: - - - - -``` -npm install image-js -``` - - - - -``` -yarn add image-js -``` - - - - -There are two ways of loading an image to process it, depending on the way the user is operating: to load locally and load through the browser. - -### Loading your first image in Node.js - -Local loading uses `readSync` function with indicated filepath: - -```ts -import { readSync } from 'image-js'; - -const parsedImage = readSync('../example.jpg'); -``` - -:::tip -Node.js can also load an image via `fetchURL`. To get more information take a look at ["Browser"](#loading-your-first-image-in-browser) part of this section. -::: - -Once the image is loaded, it returns an instance of the `Image` class, so its methods can be applied. - -```ts -const image = parsedImage.invert(); -``` - -To save an image use `writeSync` function: - -```ts -writeSync('../example.jpg', image); -``` - -Image format is automatically identified based on the extension typed by the user. In this case it's `'.jpg'`. - -So, in the end you should get a code like this. - -```ts -import { readSync, writeSync, Image } from 'image-js'; - -const parsedImage = readSync('../example.jpg'); -const image = parsedImage.invert(); -writeSync('../example.jpg', image); -``` - -### Loading your first image in browser - -To load an image via browser, in order to instantiate it, you may use `fetchURL` function: - -```ts -import { fetchURL } from 'image-js'; - -let image = await fetchURL('https:://example.com/image.jpg'); // image is ready for usage -image = image.grey(); -``` - -:::info -To see more methods visit ["Features"](./Features/Features.md 'internal link on features') category. -::: - -### Bundling your image with Vite - -To display an image via [DOM](https://en.wikipedia.org/wiki/Document_Object_Model 'wikipedia link on dom') you can use `writeCanvas` method. - -To do so, you need to create a Node.js project: - -``` -npm init -``` - -After creating one, install `vite` as a dev-dependency and then install `image-js`: - -``` -npm install -D vite -``` - -``` -npm install image-js -``` - -After this you can create a basic html page `index.html` with a `` element: - -```html - - - - - - image-js demo app - - -
- - - - -``` - -In the `` part of your code insert your `image-js` script. For instance, here the script turns image into grayscale: - -```html - -``` - -:::caution -Don't forget to specify the script type. If it is not set as module, the script will not work. -::: - -Thus, in the end your html page should look like this: - -```ts - - - - - - image-js demo app - - -
- - - - - -``` - -### What's next? - -Now that you know how images are loaded and saved you can deepen your understanding by going through [Basics](./Basics 'internal link on basics') folder and see how different basic elements of ImageJS work. You can also broaden your horizons by looking at available [Features](./Features 'internal link on features'). - -If you want to see how ImageJS works in practice I suggest you visit the [Tutorials](./Tutorials 'internal link on tutorial') segment and see for yourself its practical applications. - -### System requirements - -- Node.js 16+ - -- Google Chrome 91+, Firefox 90+, Safari 15+, Opera 77+, Edge 91+ diff --git a/docs/getting-started.mdx b/docs/getting-started.mdx new file mode 100644 index 0000000..1089485 --- /dev/null +++ b/docs/getting-started.mdx @@ -0,0 +1,108 @@ +--- +title: Getting started +sidebar_position: 0 +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +# Getting started + +ImageJS is a versatile and powerful library written in TypeScript for image processing and analysis. It gives a user a comprehensive set of tools and algorithms for manipulating, enhancing, and understanding images not only within Node.js but also across all popular browsers. + +## System requirements + +ImageJS is a modern library and does not actively support outdated runtimes. +One of the following is required: + +- An officially supported version of [Node.js](https://nodejs.org/en/download). +- A modern and up-to-date web browser. + +## Installation + +Installation of ImageJS is straight-forward. Use the terminal to install the package: + + + + +``` +npm install image-js +``` + + + + +``` +yarn add image-js +``` + + + + +## Loading your first image + +There are two ways of loading an image to process it, depending on the way the user is operating: + +### Loading and saving an image from Node.js + +Local loading uses the `readSync` or `read` function with a filepath: + +```ts +import { read, readSync } from 'image-js'; + +const parsedImage = readSync('example.jpg'); +const parsedImageAsync = await read('example.jpg'); +``` + +:::tip +Node.js can also load an image via `fetchURL`. To get more information, take a look at the next section. +::: + +Once the image is loaded, it returns an instance of the `Image` class, so its methods can be applied. + +```ts +const invertedImage = parsedImage.invert(); +``` + +To save an image use `writeSync` or `write` function: + +```ts +import { writeSync, write } from 'image-js'; + +writeSync('out.png', image); +await write('out.png', image); +``` + +Image format is automatically identified based on the extension. In this case it's `'.png'` so the image is saved as a PNG file. + +So, in the end you should get a code like this: + +```ts +import { readSync, writeSync } from 'image-js'; + +const parsedImage = readSync('example.jpg'); +const image = parsedImage.invert(); +writeSync('example.png', image); +``` + +### Loading an image from a web browser + +To load an image via a browser, you may use the `fetchURL` function: + +```ts +import { fetchURL } from 'image-js'; + +let image = await fetchURL('https:://example.com/image.jpg'); +image = image.grey(); +``` + +:::info +To see more methods, visit the ["Features"](./Features/Features.md) category. +::: + +## What's next? + +Now that you know how images are loaded and saved, you can deepen your understanding by going through the [Basics](./Basics) category and seeing how different basic elements of ImageJS work. +You can also broaden your horizons by looking at available [Features](./Features). + +If you want to see how ImageJS works in practice, we suggest you visit the [Tutorials](./Tutorials) segment and see for yourself its practical applications. diff --git a/docusaurus.config.js b/docusaurus.config.js index 9c14661..031cde4 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -126,7 +126,7 @@ async function createConfig() { items: [ { type: 'doc', - docId: 'Getting started', + docId: 'getting-started', position: 'left', label: 'Docs', }, @@ -146,7 +146,7 @@ async function createConfig() { items: [ { label: 'Getting started', - to: '/docs/Getting started', + to: '/docs/getting-started', }, { label: 'Basics', diff --git a/src/pages/index.tsx b/src/pages/index.tsx index a9b0565..cb1ddcb 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -32,7 +32,7 @@ function HomepageHeader() {
Let's get started