Croppie for Elm

This is a wrapper library of Croppie

Croppie is a fast, easy to use image cropping plugin with tons of configuration options!

Links

Demos

• Croppie
• Croppie For Elm

GitHub

• foliotek/croppie
• hallelujahdrive/elm-croppie

The Basics

import Croppie

view =
    Croppie.croppie [] [ src "images/demo-1.jpg" ]
    

Installation

Elm:

elm install hallelujahdrive/[email protected]

Then add the following elements to your page:

<link rel="stylesheet" type="text/css" href="https://unpkg.com/[email protected]/dist/elm-croppie.css" />
<script src="https://unpkg.com/[email protected]/dist/elm-croppie.js"></script>

If you use bundler please install the Javascript and CSS assets via npm:

npm install [email protected]

Then in your Javascript add a following import:

require("elm-croppie");

Usage

You can initialize ElmCroppie with the following elm code:

import Croppie
import Croppie.BindOptions exposing (..)

port croppie : Croppie.Data -> Cmd msg

view =
    Croppie.croppie [] [ id "item" ]
    
function =
    croppie <|
        Croppie.function "item" ...

You also need the following javascript code to communicate on the port.

const app = Elm.Main.init({
    node: document.getElementById("elm")
});

app.ports.croppie.subscribe((data) => {
    ElmCroppie.port(data);
});

Important Notes

Croppie uses canvas.drawImage(...) to manipulate images. Thus, images must obey the CORS policy. More info can be found here.

Who

Croppie was built by Foliotek for use in Foloptek Presentation.

And, elm-croppie was built by hallelujahdrive.

Please submit any issue or question on Github.