To execute the instance method of Croppie, send Data via port as shown below.
port croppie : Croppie.Data -> Cmd msg
view =
Croppie.croppie [] [ id "example" ]
get =
croppie <|
Croppie.get "example"
bind =
croppie <|
Croppie.bind "example" bindOptions
result =
croppie <|
Croppie.result "example" resultOptions
rotate =
croppie <|
Croppie.rotate "example" degrees
setZoom =
croppie <|
Croppie.setZoom "example" value
get : String -> Data
Get the crop points, and the zoom of the image.
The return value can be received with Croppie.Events.onGet
id
id of the target Croppie elementbind : String -> List BindOption -> Data
Bind an image to the croppie.
id
id of the target Croppie elementbindOptions
List of bind options
(see Croppie.BindOptions).result : String -> List ResultOption -> Data
Get the resulting crop of the image.
The return value can be received with Croppie.Events.onResult.
id
id of the target Croppie elementresultOptions
List of result options.
See Croppie.ResultOptions for list of optionsrotate : String -> Basics.Int -> Data
Rotate the image by a specified degree amount.
Only works with enableOrientation
option enabled
(see Croppie.Options.enableOrientation).
id
id of the target Croppie elementdegrees
rotation angle
Valid Values: 90, 180, 270, -90, -180, -270
setZoom : String -> Basics.Float -> Data
Set the zoom of a Croppie instance. The value passed in is still restricted to the min/max set by Croppie.
id
id of the target Croppie elementvalue
a floating point to scale the image within the croppie.
Must be between a min and max value set by croppie.Internal.Data
Data to communicate via port
croppie : List Option -> List (Html.Attribute msg) -> Html msg
Croppie view function.
Internal.Option
Option of Croppie
Learn more in the Croppie.Options module.
Internal.BindOption
Option of bind an image
Learn more in the Croppie.BindOptions module.
Internal.ResultOption
Option of to get the resulting crop of image
Learn more in the Croppie.ResultOptions module.
{ orientation : Basics.Int
, points : List Basics.Int
, zoom : Basics.Float
}
The crop points and the zoom of the image.
The result of cropping the image.