Elm Cropper

A minimalistic fluid width/responsive image cropper created in Elm.

Features

• Drag to position image in crop area
• Can be initialized (with image/crop size) via ports
• Sends data compatible with CanvasRenderingContext2D.drawImage() for easy integration in JS apps
• Only bare bones functionality included. (Enables a creative implementation or because MVP)

Requires

• External UI for changing zoom as in an input[type=range] hooked up to model
• Something to process the data to create the cropped image from the original

Install

elm-package install mikaxyz/elm-cropper

Usage

The examples should be enough to see how to integrate in your app.

• For integration with JS the full example has basic functionality to create images using a canvas
• The simple example has only the most basic functionality required by Elm Architecture

Build examples

npm install
npm run build
cd examples
python -m SimpleHTTPServer 8000
# browse examples at http://localhost:8000 and http://localhost:8000/simple.html