Codecs lets you use read, write, edit, and analyze images.

Overview

Codecs

Codecs lets you use read, write, edit, and analyze images.

npm install @astropub/codecs

Usage

import * as fs from 'node:fs/promises'
import * as codecs from '@astropub/codecs'

// load the JPG image
const image = await codecs.load(
	await fs.readFile('./kitten.jpg')
)

image.type   // string representing the image type ('image/jpeg')
image.data   // Uint8Array representing the image data
image.width  // number representing the image width
image.height // number representing the image height
image.ext    // string representing the image extension ('jpg')

const decoded = await image.decode()

decoded.data   // Uint8ClampedArray representing the decoded image data
decoded.width  // number representing the decoded image width
decoded.height // number representing the decoded image height

// encode the image as Avif & WebP, at 320, 640, & 960
for (const size of [ 320, 640, 960 ]) {
	const resized = await decoded.resize({ width: size })

	for (const type of [ 'image/avif', 'image/webp' ]) {
		const encoded = await resized.encode(type, { quality: 80 })

		encoded.type   // string representing the encoded image type ('image/webp')
		encoded.data   // Uint8Array representing the encoded image data
		encoded.width  // number representing the encoded image width (320 | 640 | 960)
		encoded.height // number representing the encoded image height
		encoded.ext    // string representing the encoded image extension ('webp')

		await fs.writeFile(`./kitten-${size}.${encoded.ext}`, encoded.data)
	}
}

API

load

The load function returns a loaded image. It accepts a string path, file URL, Buffer, Response, or TypedArray.

const image = await codecs.load('./kitten.jpg')

image.type   // string representing the image type ('image/jpeg')
image.data   // Uint8Array representing the image data
image.width  // number representing the image width
image.height // number representing the image height
image.ext    // string representing the image extension ('jpg')

decode

The decode function returns a decoded image. It accepts a Buffer or TypedArray.

const buffer = await fs.readFile('./kitten.jpg')

const decoded = await codecs.decode(buffer)

decoded.data   // Uint8ClampedArray representing the decoded image data
decoded.width  // number representing the decoded image width
decoded.height // number representing the decoded image height

Individual decoders are available for avif, jpg, jxl, png, webp, and wp2.

import * as codecs from '@astropub/codecs'

codecs.avif.decode(await fs.readFile('./kitten.avif'))
codecs.jpg.decode(await fs.readFile('./kitten.jpg'))
codecs.jxl.decode(await fs.readFile('./kitten.jxl'))
codecs.png.decode(await fs.readFile('./kitten.png'))
codecs.webp.decode(await fs.readFile('./kitten.webp'))
codecs.wp2.decode(await fs.readFile('./kitten.wp2'))

encode

The encode function returns an encoded image. It accepts a decoded image.

const encodedImage = await codecs.encode(decoded, 'image/webp', { quality: 80 })

encoded.type   // string representing the encoded image type ('image/webp')
encoded.data   // Uint8Array representing the encoded image data
encoded.width  // number representing the encoded image width (320 | 640 | 960)
encoded.height // number representing the encoded image height
encoded.ext    // string representing the encoded image extension ('webp')

await fs.writeFile('./kitten.webp', encodedImage)

Individual encoders are available for avif, jpg, jxl, png, webp, and wp2.

import * as codecs from '@astropub/codecs'

codecs.avif.encode(decoded)
codecs.jpg.encode(decoded)
codecs.jxl.encode(decoded)
codecs.png.encode(decoded)
codecs.webp.encode(decoded)
codecs.wp2.encode(decoded)

resize

The resize function returns a resized image. It accepts a decoded image.

const resized = await codecs.resize(decoded, { width: 320 })

resized.data   // Uint8ClampedArray representing the resized image data
resized.width  // number representing the resized image width
resized.height // number representing the resized image height

If not specified, the resized height will be determined from the width using the formula width / naturalWidth * naturalHeight.

blur

The blur function returns a blurred image. It accepts a decoded image.

const blurred = await codecs.blur(decoded, { radius: 30 })

blurhash

The blurhash function returns a blurhashed image, using the Wolt BlurHash algorithm. It accepts a decoded image.

const blurhashed = await decoded.blurhash({ width: 32 })

If not specified, the height will be determined from the image width using the formula width / naturalWidth * naturalHeight.

type

The type function returns the content type for an image buffer. It accepts a Buffer or TypedArray.

// 'image/jpeg'
const type = await codecs.type(buffer)

ext

The ext function returns the file extension for an image buffer. It accepts a Buffer or TypedArray.

// 'jpg'
const ext = await codecs.ext(buffer)

DecodedImage

The DecodedImage class represents raw, decoded image data.

const decoded = new DecodedImage(
	data   // Uint8ClampedArray
	width  // number
	height // number
)

DecodedImage#encode

The encode function of DecodedImage returns a promised encoded image from the current decoded image.

const encoded = await decoded.encoded('image/webp') // EncodedImage<'image/web', Uint8Array>

DecodedImage#blur

The blur function of DecodedImage returns a promised blurred image from the current decoded image.

const blurred = await decoded.blur({ radius: 30 }) // DecodedImage

DecodedImage#blurhash

The blurhash function of DecodedImage returns a promised blurhashed image from the current decoded image.

const blurhash = await decoded.blurhash({ radius: 30 }) // DecodedImage

DecodedImage#resize

The resize function of DecodedImage returns a promised resized image from the current decoded image.

const resized = await decoded.resize({ width: 320 }) // DecodedImage

DecodedImage#color

The color property of DecodedImage returns the dominant color in the decoded image.

decoded.color // [ 57, 52, 43 ]

EncodedImage

The EncodedImage class represents analyzed, encoded image data.

const encoded = new EncodedImage(
	type   // string ('image/avif' | 'image/gif' | 'image/jpeg' | 'image/jxl' | 'image/png' | 'image/svg+xml' | 'image/webp' | 'image/webp2')
	data   // Uint8Array
	width  // number
	height // number
)

EncodedImage#decode

The decode function of EncodedImage returns a promised decoded image from the current encoded image.

const decoded = await encoded.decoded()

Types

ImageType

The ImageType type represents known image content types.

import type { ImageType } from '@astropub/codecs'

// 'image/avif' | 'image/gif' | 'image/jpeg' | 'image/jxl' | 'image/png' | 'image/svg+xml' | 'image/webp' | 'image/webp2'
ImageType

ImageType

The ImageType type represents known image content types.

import type { ImageType } from '@astropub/codecs'

// 'image/avif' | 'image/gif' | 'image/jpeg' | 'image/jxl' | 'image/png' | 'image/svg+xml' | 'image/webp' | 'image/webp2'
ImageType

License

Codecs is generally a remix of Squoosh!.

Code original to this project is licensed under the CC0-1.0 License.

Code from Squoosh! is licensed under the Apache-2.0 License, copyright Google Inc.

Code from Avif Encoder is licensed under the BSD License, copyright Joe Drago.

Code from MozJPEG is licensed under the Modified (3-clause) BSD License, copyright Viktor Szathmáry.

Code from JXL is licensed under the Apache-2.0 License, copyright Google Inc.

Code from OxiPNG is licensed under the MIT License, copyright Joshua Holmer.

Code from WebP is licensed under the Modified (3-clause) BSD License, copyright Google Inc.

Code from WebP2 is licensed under the Apache-2.0 License, copyright Google Inc.

Code from blurhash is licensed under the MIT License, copyright Olli Mahlamäki.

You might also like...

A light wight javascript image viewing plugin with smooth animation and 0 dependence

A light wight javascript image viewing plugin with smooth animation and 0 dependence

Nov 12, 2022

ASP.NET Core image gallery with Marten, ImageSharp, and HTMX

ASP.NET Core image gallery with Marten, ImageSharp, and HTMX

Image Gallery This sample uses the following core technologies to deliver an image gallery experience: ASP.NET Core Marten ImageSharp.Web HTMX This al

Feb 9, 2022

Picdit - Photo Editor is a web application created using HTML, CSS, PHP and JavaScript

Picdit - Photo Editor is a web application created using HTML, CSS, PHP and JavaScript

Picdit - Photo Editor is a web application created using HTML, CSS, PHP and JavaScript with the help VS Code and Microsoft Azure to develop the final project application outcome.

Mar 31, 2022

Read without losing the plot. Well Read helps you organize your notes about books you're reading, so you're never lost when starting a new volume.

Read without losing the plot. Well Read helps you organize your notes about books you're reading, so you're never lost when starting a new volume.

Well Read Well Read is a website for tracking your reading of long book series. I made this to track how many pages I read in a session and to better

Dec 15, 2022

An online library for adding and removing a different number of books from a user collection, keeping track of the books you've read and the one's you are yet to read

An online library for adding and removing a different number of books from a user collection, keeping track of the books you've read and the one's you are yet to read

Awesmoe Books A Website demo for our project of book store, The website has ability of adding and removing you books from yor library, Thats reflects

Jul 8, 2022

Interactive web app where you can Store ,Add and Remove books to organize the books that you've read or the ones willing to read

bookStore Interactive web app where you can Store ,Add and Remove books to organize the books that you've read or the ones willing to read Built With

Jul 20, 2022

An application that has a frontend (user interface) that allows you to create, read, update or delete (CRUD) products using an API in which you can also create, read, update or delete products.

An application that has a frontend (user interface) that allows you to create, read, update or delete (CRUD) products using an API in which you can also create, read, update or delete products.

CRUD app with React and Firebase 9 An application that has a frontend (user interface) that allows you to create, read, update or delete (CRUD) produc

Sep 28, 2021

project overview tool, used to analyze the amount of code, the number of files, code statistics and so on.

project overview tool, used to analyze the amount of code, the number of files, code statistics  and so on.

pot z-pot is a project overview tool, used to analyze the amount of code, the number of files, code statistics and so on. 项目概述工具,用于分析代码量、文件数、代码统计等。 快速

Aug 10, 2022

React app that allows users to compare and analyze the cost of living between cities around the world.

✨ LivingApp is a react app that allows users to compare and analyze the cost of living between cities around the world. ✨ Features 🔩 Simple: Bootstra

Feb 5, 2022

Open source forensic software to analyze and present digital evidence.

Open source forensic software to analyze and present digital evidence.

Go Forensics Website Open source forensic software to analyze and present digital evidence. This is the website for Go Forensics Installation Yarn is

Apr 29, 2022

Python based web application to import, connect and analyze manufacturing data from multiple data sources.

Python based web application to import, connect and analyze manufacturing data from multiple data sources.

Analysis Platform Analysis Platform is an open source web application to import, connect and visualize factory IoT data. It helps to collect, link and

Dec 1, 2022

⚡ Pcode lets you create and share beautiful images 🎉 of your source code 🚀

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: ya

Jul 14, 2022

VSCode Serial Port Extension. You can connect any serial port used to read / write data.

VSCode Serial Port Extension. You can connect any serial port used to read / write data.

Serial Port Helper You can connect any serial port used to read / write data. Features Serial Port View; Serial Port Config; TX / RX; Send Hex Buffer:

Sep 18, 2022

Analyze dependencies in your Deno project

Analyze dependencies in your Deno project

Feb 20, 2022

Piccloud is a full-stack (Angular & Spring Boot) online image clipboard that lets you share images over the internet by generating a unique URL. Others can access the image via this URL.

Piccloud Piccloud is a full-stack application built with Angular & Spring Boot. It is an online image clipboard that lets you share images over the in

Dec 15, 2022

Create, read and edit .zip files with Javascript

JSZip A library for creating, reading and editing .zip files with JavaScript, with a lovely and simple API. See https://stuk.github.io/jszip for all t

Jan 5, 2023
Owner
Astro Community
Community maintained repos from the Astro ecosystem.
Astro Community
A jQuery plugin that displays a thumbnail grid expanding preview similar to the effect seen on Google Images.

jQuery GRIDDER 1.4.2 ======= A jQuery plugin that displays a thumbnail grid expanding preview similar to the effect seen on Google Images. We have all

Orion Gunning 455 Nov 6, 2022
A jquery plugin for comparing two images

jQuery Images Compare A jquery plugin for comparing two images Badges Features compatibility : ie9+ Effort to put appearance via css (easier to skin /

Sylvain Combes 49 Sep 5, 2022
⚠️ [Deprecated] No longer maintained, please use https://github.com/fengyuanchen/jquery-cropper

Cropper A simple jQuery image cropping plugin. As of v4.0.0, the core code of Cropper is replaced with Cropper.js. Demo Cropper.js - JavaScript image

Fengyuan Chen 7.8k Dec 27, 2022
⚠️ [Deprecated] No longer maintained, please use https://github.com/fengyuanchen/jquery-viewer

Viewer A simple jQuery image viewing plugin. As of v1.0.0, the core code of Viewer is replaced with Viewer.js. Demo Viewer.js - JavaScript image viewe

Fengyuan Chen 1k Dec 19, 2022
null 3.9k Dec 30, 2022
jQuery plugin based on raphael.js that allows you to display dynamic vector maps

jQuery Mapael - Dynamic vector maps The complete documentation is available on Mapael website (repository: 'neveldo/mapael-documentation'). Additional

Vincent Brouté 1k Jan 5, 2023
the last carousel you'll ever need

slick the last carousel you'll ever need Demo http://kenwheeler.github.io/slick CDN To start working with Slick right away, there's a couple of CDN ch

Ken Wheeler 27.8k Dec 27, 2022
Resize image in browser with high quality and high speed

pica - high quality image resize in browser Resize images in browser without pixelation and reasonably fast. Autoselect the best of available technolo

Nodeca 3.2k Dec 27, 2022
Progressive pie, donut, bar and line charts

Peity Peity (sounds like deity) is a jQuery plugin that converts an element's content into a mini <svg> pie, donut, line or bar chart. Basic Usage HTM

Ben Pickles 4.2k Jan 1, 2023
Unite Gallery - Responsive jQuery Image and Video Gallery Plugin. Aim to be the best gallery on the web on it's kind. See demo here:

##Unite Gallery - Responsive jQuery Gallery Plugin Product Link: unitegallery.net This gallery has commercial versions for: WordPress , Joomla! , Pres

Max Valiano 531 Oct 24, 2022