BptImage

The BptImage component displays images as standard img elements, CSS background elements, or applies backgrounds to the page body or any element by class name. Image effects can be applied using Canvas pixel manipulation.

Image Effects

Apply image manipulation effects using Canvas API pixel processing. Toggle effects and adjust parameters to see changes in real time.

Effect Parameters

Active Effects (applied in order)

Pixelify

Invert

Hue / Saturation

Blur

Grayscale

Demo - No effects applied (original image)

Current Configuration

📋 [+]

<BptImage Src="/images/photo.jpg"
          Alt="Photo"
          Width="100%" />

@code {
    // Toggle effects on and off
    private bool fxPixelify = false;
    private bool fxGrayscale = false;
    private int pixelSize = 8;

}

Image Mode

Standard img element with lazy loading and object-fit support.

Default (Loading=Lazy)

ObjectFit=Cover

ObjectFit=Contain

ElementBackground Mode

CSS background-image on a div with customizable size, position, repeat, and attachment properties.

Background Cover

Content overlay

BackgroundSize=Cover with child content

BackgroundSize=Contain with fallback color

BackgroundRepeat=Repeat

BackgroundRepeat=RepeatX

BackgroundPosition=Bottom

BodyBackground Mode

Apply background to the HTML body element using JavaScript interop.

BptImageMode.BodyBackground

Toggle to apply background to the page body element.

ElementBackground with AssignToClassName

Apply background to elements by class name using JavaScript interop (no div rendered).

AssignToClassName

Toggle to apply background to elements with class "demo-target".

Element with class "demo-target"

Another "demo-target" element