Cropper

Fluid width/responsive image cropper UI

TEA

init :

{ url : String

, crop :

{ width : Int

, height : 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, Cmd Msg )

TEA update function

subscriptions : Model -> Sub Msg

TEA subscriptions needs to be hooked up for mouse dragging

Types

type alias Model =

Model

State of the cropper

type alias Msg =

Msg

Messages

Helpers

Getters

cropData : Model -> CropData

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

imageSize : Model -> Vector

Get image size

cropOrigin : Model -> Vector

Get starting point of crop area over imageSize

Setters

zoom : Model -> Float -> Model

Set zoom (clamped to 0.0...1.0)

pivotX : Model -> Float -> Model

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

pivotY : Model -> Float -> Model

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

crop :

Model

-> { width : Int