mikaxyz / elm-cropper / Cropper

Fluid width/responsive image cropper UI

TEA

init : { url : String, crop : { width : Basics.Int, height : Basics.Int } } -> Model

Use this function to initialize the module with url to image and a crop size.

view : Model -> Html Msg

TEA View

update : Msg -> Model -> ( Model, Platform.Cmd.Cmd Msg )

TEA update function

subscriptions : Model -> Platform.Sub.Sub Msg

TEA subscriptions needs to be hooked up for mouse dragging

Types


type alias Model =
Types.Model

State of the cropper


type alias Msg =
Types.Msg

Messages


type alias ImageData =
Types.ImageData

Helper type intended for wrapping data from javascript via port Example: port cropperWithImage : (ImageData -> msg) -> Sub msg


type alias CropData =
Types.CropData

Helper type intended for wrapping data sent to javascript via port Example: port cropperData : CropData -> Cmd msg

Helpers

Getters

cropData : Model -> CropData

Get all data required (by CanvasRenderingContext2D.drawImage) to crop the image

imageSize : Model -> Types.Vector

Get image size

cropOrigin : Model -> Types.Vector

Get starting point of crop area over imageSize

Setters

zoom : Model -> Basics.Float -> Model

Set zoom (clamped to 0.0...1.0)

pivotX : Model -> Basics.Float -> Model

Set horizontal pivot (clamped to 0.0...1.0)

pivotY : Model -> Basics.Float -> Model

Set vertical pivot (clamped to 0.0...1.0)

crop : Model -> { width : Basics.Int, height : Basics.Int } -> Model

Set crop size. Will be limited to image size.