This package has been deprecated

Author message:

This package is deprecated and no longer maintained

Image-fns

Project Status

‼️ Work in progress. The API will be changed. Do not use it. Really. ‼️

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].