itravel-de/elm-thumbor/1.0.0

NOTE: the latest version is 1.0.1

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

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

= BackgroundColor Int Int 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 : Int
, widthRatio : Maybe Int
, heightRatio : Maybe Int
}
= LeftPixels Int
| LeftPercentage Int
| RightPixels Int
| RightPercentage Int
| HorizontalCenter
| HorizontalRepeat
= TopPixels Int
| TopPercentage Int
| BottomPixels Int
| BottomPercentage Int
| VerticalCenter
| VerticalRepeat

Round Corners

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

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

= RoundCornersBackgroundColor Int Int Int
| RoundCornersTransparentBackground

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

Image Format

Specifies the output format of the image.

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

= WebP
| Jpeg
| Gif
| Png

Fill

{ mode : FillMode
, fillTransparent : 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

= FillModeColor Int Int Int
| FillModeTransparent
| FillModeAuto
| FillModeBlur

How to fill empty space:

  • With a specific color given in RGB (0 to 255 for each channel)
  • With transparency, if supported by the output image format
  • With an auto-detected color, based on the image
  • With a blurred version of the image

Miscellaneous

autoJpg : Bool -> Filter

Overrides the AUTO_PNG_TO_JPG config variable in Thumbor.

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

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

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

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

{ radius : Int
, sigma : Maybe 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

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 : 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

{ matrixItems : List Int
, numberOfColumns : Int
, shouldNormalize : 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

Equalizes the color distribution in the image.

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

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

Changes the image to grayscale.

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

maxBytes : 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

Tells Thumbor not to upscale your images.

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

noise : Int -> Filter

Adds noise to the image.

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

proportion : Float -> Filter

Applies proportion to height and width passed for cropping.

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

quality : 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 : Int -> Int -> 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 : Int -> Filter

Rotates the given image according to the angle in degrees.

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

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

Enhances apparent sharpness of the image.

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

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

Removes any Exif information in the resulting image.

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

Removes any ICC information in the resulting image.

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

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.