@konsumer/image
v0.0.9
Published
Use the minimum amount of data to get info about an image
Downloads
13
Maintainers
Readme
image
Use the minimum amount of data to get info about an image.
These image-types are supported:
- BMP
- CUR
- DDS
- GIF
- ICNS
- ICO
- J2C
- JP2
- JPEG
- KTX
- PNG
- PNM (PAM, PBM, PFM, PGM, PPM)
- PSD
- SVG
- TGA
- TIFF
- WebP
Features
- You are not locked into nodejs or the browser or anything. This can be used in many environments (node, browser, deno, bun, Cloudflare workers, etc.)
- Grabs the smallest amount of bytes from an image as possible, and get the most info possible. This means it's fast, light, and doesn't take a lot of RAM. 1 byte is enough to basically detect format. 20 bytes is enough to get height/width, color information, and more, for most image formats.
- No external dependencies. Just add the single file to your project and use it.
- Published as ESM and CommonJS module for easy use, everywhere.
- It works with all kinds of things, like
Buffer
,ArrayBuffer
,Uint8Array
, or any array of unsigned integers (representing bytes.) - Use it with
fetch
or your favorite HTTP library.
Installation
nodejs / build-system
npm i @konsumer/image
Usage
There are 3 exported functions:
info(bytes)
- synchronous, use bytes to get as much info as possible. Here is a server-side example that uses it, but it also works in the browser.infoFetch(url)
- asynchronous, calls fetch to download very little data, and gets info. Here is a server-side demo, and here is browser-demo.infoFetchNoCors(url)
- asynchronous, Similar toinfoFetch
, but only for browser. It will get less info, and only supports images that your browser supports, but it can get height/width even when CORS would stop you. Here is an example usage.
Note: You only really need
info(url)
, and it's the default export, because it detects a URL (string param) and will try to callinfoFetch(url)
/infoFetchNoCors(url)
.
current nodejs / bun
import imagemeta from '@konsumer/image'
console.log(await imagemeta('https://placekitten.com/200/200'))
You can see a demo here.
deno
import imagemeta from 'npm:@konsumer/image'
console.log(await imagemeta('https://placekitten.com/200/200'))
older nodejs
const imagemeta = require('@konsumer/image')
// if your node doesn't have fetch
global.fetch = require('node-fetch')
imagemeta('https://placekitten.com/200/200')
.then(console.log)
browser-only
<script type=module>
import imagemeta from 'https://cdn.skypack.dev/@konsumer/image'
console.log(await imagemeta('https://placekitten.com/200/200'))
</script>
You can see a demo here.
TODO
- I need to clean up & normalize the data, and get more info about every format.
- Make a top-level
DataView
and use it for everything (similar to Buffer, no buffer utils needed.) See jpeg for example. - Also get mime, url, and filesize (on URLS)
Thanks
- I got a lot of the image byte-parsing stuff from image-size
- jpeg-header seemed to be the most reliable JPEG parsing I have found, in JS.