image-fns

Image-fns

Project Status

:bangbang: Work in progress. The API will be changed. Do not use it. Really. :bangbang:

Image-fns provides toolset for manipulating images in a browser

• Install
• Usage
  • Simple example
  • Async / await
• Security issues
• Feedback

Install

npm install image-fns

or

yarn add image-fns

Usage

Simple example

const input = document.querySelector('#file')
const preview = document.querySelector('#result')

input.addEventListener('change', e =>
  fromFile(e.target.files[0])
    .then(canvas => shrink(canvas, 300, 300))
    .then(canvas => Promise.all([canvas, hasTransparency(canvas)]))
    .then(([canvas, isTransparent]) =>
      toImage(canvas, isTransparent ? 'png' : 'jpeg', 0.1)
    )
    .then(append)
)

const append = node => preview.appendChild(node)

Async / await

const convertToBetterFormat = async file => {
  const [formats, canvas] = await Promise.all([
    getSupportedFormats(),
    fromFile(file),
  ])

  let format = 'jpeg'
  if (formats.includes('webp')) {
    format = 'webp'
  } else if (hasTransparency(canvas)) {
    format = 'png'
  }

  return toFile({ name: file.name, format, quality: 0.8 }, canvas)
}

input.addEventListener('change', async e => {
  const file = await convertToBetterFormat(e.target.files[0])

  sendToServer(file)
})

Security issues

If you think you ran into something in Uploadcare libraries which might have security implications, please hit us up at [e-mail] or Hackerone.

We'll contact you personally in a short time to fix an issue through co-op and prior to any public disclosure.

Feedback

Issues and PR‘s are welcome. You can provide your feedback or drop us a support request at [e-mail].

Changelog

1.0.0-alpha

The first public alpha release.

Added

• The shrink function to shrink any image.
• Batch of converters from and to canvas
• The hasTransparency function
• Test environment for browser