Edit on Github

ImageCrop

in namespace DotVVM.BusinessPack.Controls

Renders an ImageCrop control allowing to zoom, rotate and crop images.

Usage & Scenarios

A control which lets the user to make basic edits (like cropping, resizing or rotating) with a specified image.

Sample 1: Basic Usage

The ImageUrl property specifies the URL of the image that is being edited.

The Operations property must be bound to a property of type ImageOperations in the viewmodel. This object contains the following properties:

  • Resize represents the scale ratio of the image.

  • Rotate represents represents the rotation angle.

  • Crop represents a rectangular area (with Left, Top, Width and Height properties) the crop settings.

  • Round represents the radius of the rounded corners.

You can use the DefaultImageFactory class to load the image, apply the ImageOperations to it and save the result image.

<bp:ImageCrop ImageUrl="{value: ImagePath}"
              Operations="{value: ImageOperations}" />

<p>Left: {{value: ImageOperations.Crop.Left}}px</p>
<p>Top: {{value: ImageOperations.Crop.Top}}px</p>
<p>Width: {{value: ImageOperations.Crop.Width}}px</p>
<p>Height: {{value: ImageOperations.Crop.Height}}px</p>
<p>Rotate: {{value: ImageOperations.Rotate}}°</p>
<p>Resize: {{value: ImageOperations.Resize}}px</p>

<bp:Button Text="Save"
           Click="{command: Save()}" />
<br />
<br />

<p>Result: <a href="{value: Result}">{{value: Result}}</a></p>
<img src="{value: Result}" />
using DotVVM.BusinessPack.Controls;
using DotVVM.Framework.Utils;
using DotVVM.Framework.ViewModel;


namespace DotvvmWeb.Views.Docs.Controls.businesspack.ImageCrop.sample1
{
    public class ViewModel : DotvvmViewModelBase
    {
        public string ImagePath { get; set; } = "../images/imagecrop.webp";
        public string Result { get; set; }
        public ImageOperations ImageOperations { get; set; } = new ImageOperations();

        public void Save()
        {
            Result = $"/App_Images/{SecureGuidGenerator.GenerateGuid()}.png";

            using (var factory = new DefaultImageFactory())
            {
                factory
                    .Load(GetPhysicalPath(ImagePath))
                    .Apply(ImageOperations)
                    .Save(GetPhysicalPath(Result));
            }
        }

        private string GetPhysicalPath(string url)
        {
            return Context.Configuration.ApplicationPhysicalPath + url.Substring(1).Replace("/", "\\");
        }
    }
}

Sample 2: Aspect Ratio

The ratio between the width and height of the cropped area can be set using the AspectRatio property. The value of the property is string and the control expects two numbers separated by a colon, e.g. 1:1, 4:3, 16:9 etc.

<bp:ImageCrop ImageUrl="{value: ImagePath}"
              Operations="{value: ImageOperations}"
              AspectRatio="1:1" />
using DotVVM.BusinessPack.Controls;
using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.ImageCrop.sample2
{
    public class ViewModel : DotvvmViewModelBase
    {
        public string ImagePath { get; set; } = "../images/imagecrop.webp";
        public ImageOperations ImageOperations { get; set; } = new ImageOperations();
    }
}

Sample 3: Forced Crop Radius

To make the border radius fixed, the ForcedCropRadius property can be used. It expects a value between 0 and 50.

0 means no border radius. 50 means maximum border radius. The value is in percent, so the border radius of 50% can be used to make a circle.

<bp:ImageCrop ImageUrl="{value: ImagePath}"
              Operations="{value: ImageOperations}"
              ForcedCropRadius="50" />
using DotVVM.BusinessPack.Controls;
using DotVVM.Framework.ViewModel;


namespace DotvvmWeb.Views.Docs.Controls.businesspack.ImageCrop.sample3
{
    public class ViewModel : DotvvmViewModelBase
    {
        public string ImagePath { get; set; } = "../images/imagecrop.webp";
        public ImageOperations ImageOperations { get; set; } = new ImageOperations();
    }
}

Sample 4: Forced Crop Area

The crop area dimensions can be fixed using the ForcedCropWidth and ForcedCropHeight properties.

<bp:ImageCrop ImageUrl="{value: ImagePath}"
              Operations="{value: ImageOperations}"
              ForcedCropWidth="150"
              ForcedCropHeight="150" />
using DotVVM.BusinessPack.Controls;
using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.ImageCrop.sample4
{
    public class ViewModel : DotvvmViewModelBase
    {
        public string ImagePath { get; set; } = "../images/imagecrop.webp";
        public ImageOperations ImageOperations { get; set; } = new ImageOperations();
    }
}

Sample 5: Changed Event

When the user changes any parameter of the image, the Changed event can be used to call a command in the viewmodel.

<bp:ImageCrop ImageUrl="{value: ImagePath}"
              Operations="{value: ImageOperations}"
              Changed="{command: Changed()}" />

<p>Change count: {{value: ChangeCount}}</p>
using DotVVM.BusinessPack.Controls;
using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.ImageCrop.sample5
{
    public class ViewModel : DotvvmViewModelBase
    {
        public int ChangeCount { get; set; }
        public string ImagePath { get; set; } = "../images/imagecrop.webp";
        public ImageOperations ImageOperations { get; set; } = new ImageOperations();

        public void Changed()
        {
            ChangeCount++;
        }
    }
}

Sample 6: Predefined Operations

If you set the ImageOperations parameters from the viewmodel, you can specify default values for the control.

<bp:ImageCrop ImageUrl="{value: ImagePath}"
              Operations="{value: ImageOperations}" />
using DotVVM.BusinessPack.Controls;
using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.ImageCrop.sample6
{
    public class ViewModel : DotvvmViewModelBase
    {
        public string ImagePath { get; set; } = "../images/imagecrop.webp";

        public ImageOperations ImageOperations { get; set; } = new ImageOperations {
            Crop = new CropRectangle {
                Left = 150,
                Top = 150,
                Width = 100,
                Height = 100
            },
            Resize = 400,
            Rotate = 45,
            Round = 50
        };
    }
}

Sample 7: Custom Icons

To customize the look of toolbar icons in the control, you can use the following inner elements:

  • SwitchToMovingIcon allows to customize the switch mode icon. The default value is Move.

  • SwitchToCroppingIcon allows to customize the switch mode icon. The default value is Crop.

  • ResetIcon allows to customize the reset icon. The default value is Reset.

  • RotateLeftIcon allows to customize the rotate left icon. The default value is RotateLeft.

  • RotateRightIcon allows to customize the rotate right icon. The default value is RotateRight.

  • ZoomInIcon allows to customize the zoom in icon. The default value is ZoomIn.

  • ZoomOutIcon allows to customize the zoom out icon. The default value is ZoomOut.

See the Icon documentation to find about using other icon packs.

<bp:ImageCrop ImageUrl="{value: ImagePath}"
              Operations="{value: ImageOperations}">
    <SwitchToMovingIcon>
        <bp:Icon Icon="Move"></bp:Icon>
    </SwitchToMovingIcon>
    <SwitchToCroppingIcon>
        <bp:Icon Icon="Crop"></bp:Icon>
    </SwitchToCroppingIcon>
    <ResetIcon>
        <bp:Icon Icon="Reset"></bp:Icon>
    </ResetIcon>
    <RotateLeftIcon>
        <bp:Icon Icon="RotateLeft"></bp:Icon>
    </RotateLeftIcon>
    <RotateRightIcon>
        <bp:Icon Icon="RotateRight"></bp:Icon>
    </RotateRightIcon>
    <ZoomInIcon>
        <bp:Icon Icon="ZoomIn"></bp:Icon>
    </ZoomInIcon>
    <ZoomOutIcon>
        <bp:Icon Icon="ZoomOut"></bp:Icon>
    </ZoomOutIcon>
</bp:ImageCrop>
using DotVVM.BusinessPack.Controls;
using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.ImageCrop.sample7
{
    public class ViewModel : DotvvmViewModelBase
    {
        public string ImagePath { get; set; } = "../images/imagecrop.webp";
        public ImageOperations ImageOperations { get; set; } = new ImageOperations();
    }
}

Properties

Name Type Description Notes Default Value
property icon AspectRatio String Gets or sets the aspect ratio to force when cropping the image (eg. 1:1).
attribute
inner element
static value
bindable
default
 null
property icon ForcedCropHeight Int32? Gets or sets the forced height of the cropped image. If the ForcedCropWidth property is not set, it is computed automatically (see the AspectRatio).
attribute
inner element
static value
bindable
default
 null
property icon ForcedCropRadius Int32? Gets or sets the forced radius of the image corners. The value must be between 0 and 50 % (both inclusive). It is not set by default.
attribute
inner element
static value
bindable
default
 null
property icon ForcedCropWidth Int32? Gets or sets the forced width of the cropped image. If the ForcedCropHeight property is not set, it is computed automatically (see the AspectRatio).
attribute
inner element
static value
bindable
default
 null
property icon ImageUrl String Gets or sets the URL of an image to crop.
attribute
inner element
static value
bindable
default
 null
property icon Operations ImageOperations Gets or sets the operations applied to the image being cropped.
attribute
inner element
static value
bindable
default
 null
property icon ResetIcon IconBase Gets or sets the icon displayed on the reset button.
attribute
inner element
static value
bindable
default
 null
property icon RotateLeftIcon IconBase Gets or sets the icon displayed on the rotate-left button.
attribute
inner element
static value
bindable
default
 null
property icon RotateRightIcon IconBase Gets or sets the icon displayed on the rotate-right button.
attribute
inner element
static value
bindable
default
 null
property icon SelectOnlyImage Boolean Gets or sets a value indicating selecting only image part.
attribute
inner element
static value
bindable
default
 True
property icon SwitchToCroppingIcon IconBase Gets or sets the icon displayed on the button switching from Cropping mode to Moving mode.
attribute
inner element
static value
bindable
default
 null
property icon SwitchToMovingIcon IconBase Gets or sets the icon displayed on the button switching from Cropping mode to Moving mode.
attribute
inner element
static value
bindable
default
 null
property icon ZoomInIcon IconBase Gets or sets the icon displayed on the zoom-in button.
attribute
inner element
static value
bindable
default
 null
property icon ZoomOutIcon IconBase Gets or sets the icon displayed on the zoom-out button.
attribute
inner element
static value
bindable
default
 null

Events

Name Type Description
event icon Changed Command Gets or sets the command triggered when the image attributes are changed.

HTML produced by the control

Information about cookies

We use cookies to analyze our traffic, personalize content and ads, and to provide some social media features. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you've provided to them or that they've collected from your use of their services.

Edit options

Information about cookies

We use cookies to analyze our traffic, personalize content and ads, and to provide some social media features. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you've provided to them or that they've collected from your use of their services.

Choose which cookies you want to enable

Necessary cookies Always allowed

Necessary cookies are essential and maintain information based on your activity on our site, like remembering your signed in account, selection of your language, or products added to the shopping cart. The website cannot work properly without these cookies.

Google Analytics

We use these cookies to measure, collect, analyse and report how users interact with our sites to better understand their behavior. Thanks to this, we can improve the site and provide better experience. The analytics service is provided by Google Inc.

Google Ads

We use these cookies to measure conversions from our advertisement and banners distributed via Google Ads. This allows us to better target the ads and make them more relevant to you.

Facebook Pixel

We use these cookies to measure conversions from our advertisement and banners distributed via Facebook. This allows us to better target the ads and make them more relevant to you.

Smartlook

We use these cookies to measure, collect, analyse and report how users interact with our sites to better understand their behavior. Thanks to this, we can improve the site and provide better experience. The analytics service is provided by Smartlook.

Google ads user data

Google ads ad personalization