https://github.com/hjfitz/js-images

Compress and resize images in the DOM
https://github.com/hjfitz/js-images

compression dom image image-compression image-resize image-resizer resize resizing typescript

Last synced: 23 days ago
JSON representation

Compress and resize images in the DOM

• Host: GitHub
• URL: https://github.com/hjfitz/js-images
• Owner: hjfitz
• License: gpl-3.0
• Created: 2019-04-22T10:41:21.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2019-06-19T09:24:30.000Z (over 5 years ago)
• Last Synced: 2024-11-14T10:40:38.636Z (3 months ago)
• Topics: compression, dom, image, image-compression, image-resize, image-resizer, resize, resizing, typescript
• Language: TypeScript
• Homepage:
• Size: 35.2 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# js-images

> Resize and compress images within the web browser

## Install

```zsh

yarn add js-images

```

## Usage

### With a URL

```ts

import modify from 'js-images'

const resizedImage: HTMLImageElement = await modify(`https://placeimg.com/640/480/any`, {

	height: 480,

	width: 200,

	format: 'dom',

})

document.body.appendChild(reizedImage)

```

### From a File Input

```ts

import modify from 'js-images'

import axios from 'axios'

const inp: HTMLInputElement = document.querySelector('input[type=file]')

// get our image from the input

const compressedImageAsFile: File = await modify(inp, {quality: 0.5, format: 'file'})

// send it to the server!

await axios.post('/api/image', compressedImageAsFile)

```

### From a File Event

```ts

import modify from 'js-images'

const inp: HTMLInputElement = document.querySelector('input[type=file]')

inp.addEventListner('change', async (ev) => {

	const imgB64 = await modify(ev.target, {quality: 0.8})

	const {data: resp} = await axios.post('/api/image', {imgB64})

})

```

**Note: top-level await does not work in the browser! these should be wrapped in an async IIFE.**

## API

js-images returns either a HTMLImageElement of the desired image, a base64 encoded image, or a raw File. It takes either an image URL or HTMLFileInput element as the first argument.

### libraryname(img, options)

Return: `Promise`

#### options.height

Type: `number`

The desired height to scale to. If no `width` is given, the resulting width is scaled proportionally.

#### options.width

Type: `number`

The desired width to scale to. Like `options.height`, if no `height` is given then the resulting height is scaled proportionally.

#### options.quality

Type: `number`

The quality of the new image, from 0.0 (lowest) to 1.0 (height). By including this, the image will be converted to a JPG.

#### options.format

Type: `string`

How the new image should be returned. May one of:  `url|dom|file`