Interface RequestInitCfPropertiesImageDraw

interface RequestInitCfPropertiesImageDraw {
    background?: string;
    bottom?: number;
    fit?: "scale-down" | "contain" | "cover" | "crop" | "pad";
    gravity?: "auto" | BasicImageTransformationsGravityCoordinates | "left" | "right" | "top" | "bottom" | "center";
    height?: number;
    left?: number;
    opacity?: number;
    repeat?: true | "x" | "y";
    right?: number;
    rotate?: 0 | 90 | 180 | 270 | 360;
    top?: number;
    url: string;
    width?: number;
}

Hierarchy (view full)

Properties

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

Properties

Optional background

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.)

Optional bottom

bottom?: number

Optional fit

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

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.

Optional gravity

gravity?: "auto" | BasicImageTransformationsGravityCoordinates | "left" | "right" | "top" | "bottom" | "center"

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.

Optional height

height?: number

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

Optional left

left?: number

Optional opacity

opacity?: number

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

Optional repeat

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).

Optional right

right?: number

Optional rotate

rotate?: 0 | 90 | 180 | 270 | 360

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

Optional top

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

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.

Optional width

width?: number

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

Settings

Member Visibility

Theme

On This Page

backgroundbottomfitgravityheightleftopacityrepeatrightrotatetopurlwidth