From f991ba995ae57fcffc777ee00cb0359b9f48c081 Mon Sep 17 00:00:00 2001 From: EscapedGibbon Date: Tue, 9 Dec 2025 12:07:15 +0100 Subject: [PATCH 1/2] docs: explain image js changes for browser support --- blog/releases/1.0.md | 21 +++++++++++++++++++-- docs/getting-started.mdx | 36 ++++++++++++++++++++++++++++++++++++ 2 files changed, 55 insertions(+), 2 deletions(-) diff --git a/blog/releases/1.0.md b/blog/releases/1.0.md index e2eab66..c090598 100644 --- a/blog/releases/1.0.md +++ b/blog/releases/1.0.md @@ -31,7 +31,7 @@ Developers can now catch bugs at compile time rather than discovering them in pr #### Loading and saving images -`load()` and `save()` have been replaced with dedicated functions `read()` and `write()`. +`load()` and `save()` have been restructured and replaced with different functions. `read()` and `write()` are now used for reading and writing images. ```ts //Before @@ -55,7 +55,22 @@ const img = readSync('cat.jpg'); writeSync('newCat.jpg', img); ``` -Those changes separate I/O operations from image manipulation for a clearer API design. +However, these functions are only implemented for Node.js. To read an image in browser via URL, you can use `fetchURL`. +Or, if you have an HTML element that you want to read an image from, use `readImg`. + +```ts +const htmlImage = document.querySelector('img'); +const img = readImg(htmlImage); +``` + +For writing an image in the browser to canvas, `writeCanvas` is available. + +```ts +const canvas = document.getElementById('myCanvas'); +writeCanvas(img, canvas); +``` + +These changes separate I/O operations from image manipulation for a clearer API design. #### Creating images @@ -254,6 +269,8 @@ Several methods have been renamed for consistency: `img.getMedian()` ➡️ `img.median()` +`getBase64()` ➡️ `encodeDataURL()` + ### Compatibility requirements - Node.js: 18+ (previously 14+) diff --git a/docs/getting-started.mdx b/docs/getting-started.mdx index 55ee6a9..046ab7a 100644 --- a/docs/getting-started.mdx +++ b/docs/getting-started.mdx @@ -96,6 +96,42 @@ let image = await fetchURL('https://example.com/image.jpg'); image = image.grey(); ``` +You can also read and write an image from and to HTML image source. Here is a simple example: + +```html + + + + + + + + +``` + :::info To see more methods, visit the ["Features"](./features/features.mdx) category. ::: From c0a1428412c99b0cae31420efda846f3b42ad53a Mon Sep 17 00:00:00 2001 From: EscapedGibbon Date: Tue, 9 Dec 2025 14:53:37 +0100 Subject: [PATCH 2/2] docs: resolve conversations --- blog/releases/1.0.md | 21 ++++++++++++++++++--- docs/getting-started.mdx | 17 ++++++++++------- 2 files changed, 28 insertions(+), 10 deletions(-) diff --git a/blog/releases/1.0.md b/blog/releases/1.0.md index c090598..7226d91 100644 --- a/blog/releases/1.0.md +++ b/blog/releases/1.0.md @@ -31,7 +31,11 @@ Developers can now catch bugs at compile time rather than discovering them in pr #### Loading and saving images -`load()` and `save()` have been restructured and replaced with different functions. `read()` and `write()` are now used for reading and writing images. +`load()` and `save()` have been restructured and replaced with different functions. + +#### Node.js only + +`read()` and `write()` are for reading and writing images on the file system with Node.js. ```ts //Before @@ -55,8 +59,19 @@ const img = readSync('cat.jpg'); writeSync('newCat.jpg', img); ``` -However, these functions are only implemented for Node.js. To read an image in browser via URL, you can use `fetchURL`. -Or, if you have an HTML element that you want to read an image from, use `readImg`. +#### Node.js and browser + +You can read an image via URL, by using `fetchURL`. This function works both for Node.js and browser. + +```ts +import { fetchURL } from 'image-js'; +let image = await fetchURL('https://example.com/image.jpg'); +image = image.grey(); +``` + +#### Browser only + +If you have an HTML element that you want to read an image from, use `readImg`. ```ts const htmlImage = document.querySelector('img'); diff --git a/docs/getting-started.mdx b/docs/getting-started.mdx index 046ab7a..37a4e09 100644 --- a/docs/getting-started.mdx +++ b/docs/getting-started.mdx @@ -105,20 +105,23 @@ You can also read and write an image from and to HTML image source. Here is a si