for more information visit the package's GitHub page
Package contains the following modules:
This is a wrapper library of Croppie
Croppie is a fast, easy to use image cropping plugin with tons of configuration options!
import Croppie
view =
Croppie.croppie [] [ src "images/demo-1.jpg" ]
Elm:
elm install hallelujahdrive/elm-croppie@1.0.3
Then add the following elements to your page:
<link rel="stylesheet" type="text/css" href="https://unpkg.com/elm-croppie@1.0.3/dist/elm-croppie.css" />
<script src="https://unpkg.com/elm-croppie@1.0.3/dist/elm-croppie.js"></script>
If you use bundler please install the Javascript and CSS assets via npm:
npm install elm-croppie@1.0.3
Then in your Javascript add a following import:
require("elm-croppie");
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);
});
Croppie uses canvas.drawImage(...)
to manipulate images. Thus, images must obey the CORS policy. More info can be found here.
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.