Croppie

the elegant image cropper

~5KB gzip TypeScript ES Modules Zero Dependencies

Try it

Cropped result

128×128 output

Install

        
# npm
npm install @bayinformatics/croppie

# or from git
npm install github:bayinformatics/croppie

Usage

        
import Croppie from '@bayinformatics/croppie'
import '@bayinformatics/croppie/croppie.css'

const cropper = new Croppie(element, {
  viewport: { width: 200, height: 200, type: 'circle' },
  boundary: { width: 300, height: 300 }
})

// Bind a file directly
await cropper.bindFile(file)

// Get cropped result
const blob = await cropper.result({ type: 'blob' })
        
      