SongGuess
    Preparing search index...

    Interface RequestInitCfPropertiesImageDraw

    interface RequestInitCfPropertiesImageDraw {
        background?: string;
        bottom?: number;
        composite?: "in" | "out" | "over" | "atop" | "xor" | "lighter";
        fit?: "cover" | "scale-down" | "contain" | "crop" | "pad" | "squeeze";
        gravity?:
            | "auto"
            | "center"
            | "bottom"
            | "top"
            | "face"
            | "left"
            | "right"
            | "entropy"
            | BasicImageTransformationsGravityCoordinates;
        height?: number;
        left?: number;
        opacity?: number;
        repeat?: true
        | "x"
        | "y";
        right?: number;
        rotate?: 0 | 180 | 90 | 270 | 360;
        segment?: "foreground";
        top?: number;
        url: string;
        width?: number;
    }

    Hierarchy (View Summary)

    Index

    Properties

    background? bottom? composite? fit? gravity? height? left? opacity? repeat? right? rotate? segment? top? url width?

    Properties

    background?: string

    Background color to add underneath the image. Applies only to images with transparency (such as PNG). Accepts any CSS color (#RRGGBB, rgba(…), hsl(…), etc.)

    bottom?: number
    composite?: "in" | "out" | "over" | "atop" | "xor" | "lighter"

    How to combine the foreground and backdrop pixels to create the result

    fit?: "cover" | "scale-down" | "contain" | "crop" | "pad" | "squeeze"

    Resizing mode as a string. It affects interpretation of width and height options:

    • scale-down: Similar to contain, but the image is never enlarged. If the image is larger than given width or height, it will be resized. Otherwise its original size will be kept.
    • contain: Resizes to maximum size that fits within the given width and height. If only a single dimension is given (e.g. only width), the image will be shrunk or enlarged to exactly match that dimension. Aspect ratio is always preserved.
    • cover: Resizes (shrinks or enlarges) to fill the entire area of width and height. If the image has an aspect ratio different from the ratio of width and height, it will be cropped to fit.
    • crop: The image will be shrunk and cropped to fit within the area specified by width and height. The image will not be enlarged. For images smaller than the given dimensions it's the same as scale-down. For images larger than the given dimensions, it's the same as cover. See also trim.
    • pad: Resizes to the maximum size that fits within the given width and height, and then fills the remaining area with a background color (white by default). Use of this mode is not recommended, as the same effect can be more efficiently achieved with the contain mode and the CSS object-fit: contain property.
    • squeeze: Stretches and deforms to the width and height given, even if it breaks aspect ratio
    gravity?:
        | "auto"
        | "center"
        | "bottom"
        | "top"
        | "face"
        | "left"
        | "right"
        | "entropy"
        | BasicImageTransformationsGravityCoordinates

    When cropping with fit: "cover", this defines the side or point that should be left uncropped. The value is either a string "left", "right", "top", "bottom", "auto", or "center" (the default), or an object {x, y} containing focal point coordinates in the original image expressed as fractions ranging from 0.0 (top or left) to 1.0 (bottom or right), 0.5 being the center. {fit: "cover", gravity: "top"} will crop bottom or left and right sides as necessary, but won’t crop anything from the top. {fit: "cover", gravity: {x:0.5, y:0.2}} will crop each side to preserve as much as possible around a point at 20% of the height of the source image.

    height?: number

    Maximum height in image pixels. The value must be an integer.

    left?: number
    opacity?: number

    Floating-point number between 0 (transparent) and 1 (opaque). For example, opacity: 0.5 makes overlay semitransparent.

    repeat?: true | "x" | "y"
    • If set to true, the overlay image will be tiled to cover the entire area. This is useful for stock-photo-like watermarks.
    • If set to "x", the overlay image will be tiled horizontally only (form a line).
    • If set to "y", the overlay image will be tiled vertically only (form a line).
    right?: number
    rotate?: 0 | 180 | 90 | 270 | 360

    Number of degrees (90, 180, 270) to rotate the image by. width and height options refer to axes after rotation.

    segment?: "foreground"

    Image segmentation using artificial intelligence models. Sets pixels not within selected segment area to transparent e.g "foreground" sets every background pixel as transparent.

    top?: number

    Position of the overlay image relative to a given edge. Each property is an offset in pixels. 0 aligns exactly to the edge. For example, left: 10 positions left side of the overlay 10 pixels from the left edge of the image it's drawn over. bottom: 0 aligns bottom of the overlay with bottom of the background image.

    Setting both left & right, or both top & bottom is an error.

    If no position is specified, the image will be centered.

    url: string

    Absolute URL of the image file to use for the drawing. It can be any of the supported file formats. For drawing of watermarks or non-rectangular overlays we recommend using PNG or WebP images.

    width?: number

    Maximum width in image pixels. The value must be an integer.

    Settings

    Member Visibility

    On This Page

    Properties