itravel-de / elm-thumbor / Thumbor.Filter


type Filter

A filter that can be used with the filters attribute. See the Implementations section for details and available filters.

Implementations

Some filters can be quite complex and their usage might not be obvious at first sight. This package documentation will not to try to explain what the filters do in detail, but instead link to the official Thumbor documentation.

Background Color

backgroundColor : BackgroundColor -> Filter

Sets the background layer to the specified color. This is specifically useful when converting transparent images (i.e. PNG) to JPEG.

Thumbor docs: https://thumbor.readthedocs.io/en/latest/background_color.html


type BackgroundColor
    = BackgroundColor Basics.Int Basics.Int Basics.Int
    | AutomaticBackgroundColor

Either a specific color given in RGB (0 to 255 for each channel) or automatic detection by Thumbor.

Watermark

watermark : WatermarkDefinition -> Filter

Adds a watermark to the image.

Example for adding a watermark on the bottom left with a vertical and horizontal distance of 25 pixels to the border:

Thumbor.Filter.watermark
    { imageUrl = "https://example.com/watermark.png"
    , horizontalPosition = Thumbor.Filter.LeftPixels 25
    , verticalPosition = Thumbor.Filter.BottomPixels 25
    , alphaPercentage = 50
    , widthRatio = Nothing
    , heightRatio = Nothing
    }

Thumbor docs: https://thumbor.readthedocs.io/en/latest/watermark.html


type alias WatermarkDefinition =
{ imageUrl : String
, horizontalPosition : WatermarkHorizontalPosition
, verticalPosition : WatermarkVerticalPosition
, alphaPercentage : Basics.Int
, widthRatio : Maybe Basics.Int
, heightRatio : Maybe Basics.Int 
}


type WatermarkHorizontalPosition
    = LeftPixels Basics.Int
    | LeftPercentage Basics.Int
    | RightPixels Basics.Int
    | RightPercentage Basics.Int
    | HorizontalCenter
    | HorizontalRepeat


type WatermarkVerticalPosition
    = TopPixels Basics.Int
    | TopPercentage Basics.Int
    | BottomPixels Basics.Int
    | BottomPercentage Basics.Int
    | VerticalCenter
    | VerticalRepeat

Round Corners

roundCorners : Basics.Int -> RoundCornersBackgroundColor -> Filter

Adds rounded corners to the image using the specified color as background.

Thumbor docs: https://thumbor.readthedocs.io/en/latest/round_corners.html


type RoundCornersBackgroundColor
    = RoundCornersBackgroundColor Basics.Int Basics.Int Basics.Int
    | RoundCornersTransparentBackground

Either a specific color given in RGB (0 to 255 for each channel) or transparent.

Image Format

format : ImageFormat -> Filter

Specifies the output format of the image.

Thumbor docs: https://thumbor.readthedocs.io/en/latest/format.html


type ImageFormat
    = WebP
    | Jpeg
    | Gif
    | Png

Fill

fill : { mode : FillMode, fillTransparent : Basics.Bool } -> Filter

Permits to return an image sized exactly as requested. Empty space will be filled according to the given FillMode. Additionally, transparent areas of the source image can be filled as well.

Usually used with NormalFitIn or AdaptiveFitIn FitInMode.

Thumbor docs: https://thumbor.readthedocs.io/en/latest/filling.html


type FillMode
    = FillModeColor Basics.Int Basics.Int Basics.Int
    | FillModeTransparent
    | FillModeAuto
    | FillModeBlur

How to fill empty space:

Miscellaneous

autoJpg : Basics.Bool -> Filter

Overrides the AUTO_PNG_TO_JPG config variable in Thumbor.

Thumbor docs: https://thumbor.readthedocs.io/en/latest/autojpg.html

focal : { left : Basics.Int, top : Basics.Int, right : Basics.Int, bottom : Basics.Int } -> Filter

This filter adds a focal point, which is used in later transforms.

Thumbor docs: https://thumbor.readthedocs.io/en/latest/focal.html

blur : { radius : Basics.Int, sigma : Maybe Basics.Int } -> Filter

Applies a gaussian blur to the image, taking the radius as the first argument and an optional sigma as the second.

Thumbor docs: https://thumbor.readthedocs.io/en/latest/blur.html

brightness : Basics.Int -> Filter

Increases or decreases the image brightness in percent. Negative percentages decrease the brightness, positive ones increase it.

Thumbor docs: https://thumbor.readthedocs.io/en/latest/brightness.html

contrast : Basics.Int -> Filter

Increases or decreases the image contrast in percent. Negative percentages decrease the contrast, positive ones increase it.

Thumbor docs: https://thumbor.readthedocs.io/en/latest/contrast.html

convolution : { matrixItems : List Basics.Int, numberOfColumns : Basics.Int, shouldNormalize : Basics.Bool } -> Filter

Runs a convolution matrix (or kernel) on the image. See Kernel (image processing) for details on the process.

Thumbor docs: https://thumbor.readthedocs.io/en/latest/convolution.html

equalize : Filter

Equalizes the color distribution in the image.

Thumbor docs: https://thumbor.readthedocs.io/en/latest/equalize.html

extractFocal : Filter

Tries to detect focal points within the image. Please refer to the Thumbor documentation for more details and prerequisites.

Thumbor docs: https://thumbor.readthedocs.io/en/latest/extract_focal_points.html

grayscale : Filter

Changes the image to grayscale.

Thumbor docs: https://thumbor.readthedocs.io/en/latest/grayscale.html

maxBytes : Basics.Int -> Filter

Automatically degrades the quality of the image until the image is under the specified amount of bytes.

Thumbor docs: https://thumbor.readthedocs.io/en/latest/max_bytes.html

noUpscale : Filter

Tells Thumbor not to upscale your images.

Thumbor docs: https://thumbor.readthedocs.io/en/latest/no_upscale.html

noise : Basics.Int -> Filter

Adds noise to the image.

Thumbor docs: https://thumbor.readthedocs.io/en/latest/noise.html

proportion : Basics.Float -> Filter

Applies proportion to height and width passed for cropping.

Thumbor docs: https://thumbor.readthedocs.io/en/latest/proportion.html

quality : Basics.Int -> Filter

Changes the overall quality of the JPEG image (does nothing for PNGs or GIFs).

Thumbor docs: https://thumbor.readthedocs.io/en/latest/quality.html

rgb : Basics.Int -> Basics.Int -> Basics.Int -> Filter

Changes the amount of color in each of the three channels. The given values are percentages (-100 to 100).

Thumbor docs: https://thumbor.readthedocs.io/en/latest/rgb.html

rotate : Basics.Int -> Filter

Rotates the given image according to the angle in degrees.

Thumbor docs: https://thumbor.readthedocs.io/en/latest/rotate.html

sharpen : { amount : Basics.Float, radius : Basics.Float, luminanceOnly : Basics.Bool } -> Filter

Enhances apparent sharpness of the image.

Thumbor docs: https://thumbor.readthedocs.io/en/latest/sharpen.html

stretch : Filter

Applies resize without autocrop if fit-in option will be not passed in the arguments.

Thumbor docs: https://thumbor.readthedocs.io/en/latest/stretch.html

stripExif : Filter

Removes any Exif information in the resulting image.

Thumbor docs: https://thumbor.readthedocs.io/en/latest/strip_exif.html

stripIcc : Filter

Removes any ICC information in the resulting image.

Thumbor docs: https://thumbor.readthedocs.io/en/latest/strip_icc.html

upscale : Filter

Tells thumbor to upscale your images. This only makes sense with NormalFitIn or AdaptiveFitIn FitInMode.

Thumbor docs: https://thumbor.readthedocs.io/en/latest/upscale.html

Advanced

custom : String -> List String -> Filter

Create a custom filter based on its name and arguments. It is useful in case you have implemented your own Thumbor filters or to use any filters that are not supported by this package yet.

Before using this, check if there is a type safe implementation in this module and use that instead.

Example usage:

custom "noise" [ "40" ]

custom "sharpen" [ "2", "1.0", "true" ]

toString : Filter -> String

Transforms a Filter into its String representation for use inside a Thumbor compatible URL. There is usually no need to use this as a consumer of this package.