Owin.ThumbCrop
is a middleware for create thumb based in your local or storage webapp images
Installation
Install from Nuget
Install-Package Owin.ThumbCrop
Install from dotnet core CLI
dotnet add package Owin.ThumbCrop
How to use
Just put the UrlPattern
at the end of your image URL and pass the transformation parameters
~/images/cat.jpg.thumb.axd?width=200&height=250&refpoint=TopLeft&crop&vignette
Original:
Thumb:
Configurations
Just add the middleware in owin pipeline, before UseStaticFiles
and UseMvc
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
app.UseThumbCrop();
app.UseStaticFiles();
app.UseMvc(routes => {...});
}
Its possible to pass a configurations to the UseThumbMiddleware
method as a instance of ThumbCropConfig
or on an overload which receives an Action<ThumbCropConfig>
app.UseThumbCrop(config => {
config.UseCache = true;
config.CacheExpireTime = TimeSpan.FromDays(1);
});
The configuration options are
Name | Type | Description | Default |
---|---|---|---|
DefaultWidth | int | Default thumb width | 100 |
DefaultHeight | int | Default thumb height | 100 |
UseCache | bool | Defines if will use cache | false |
UrlPattern | string | The pattern in end of URL to trigger the image transformations | ".thumb.axd" |
CacheExpireTime | Timespan | Time for the cache expires | 1 hour |
NotFoundFile | string | File to replace a not known request URL | null |
ImageSources | IEnumerable<IImageSource> | Defines the source of the image files | LocalFileImageSource |
CacheManager | IThumbCacheManager | Cache manager | InMemoryCacheManager |
Thumb Options
Thats options which can be used in the query string
Name | Type | Values | Description |
---|---|---|---|
width | int | Defines the width | |
height | int | Defines the height | |
crop | bool | Defines if will crop on resize | |
refpoint | ReferencePoint | TopLeft, TopCenter, TopRight, MiddleLeft, MiddleCenter, MiddleRight, BottomLeft, BottomCenter, BottomRight | Defines the reference point when resize and crop |
flip | FlipType | Horizontal, Vertical | Flip the image based on parameter |
opacity | int | 0 ... 100 | Set the image opacity |
rotate | int | 0 ... 360 | Rotate image |
hue | int | Set image hue | |
oil | int | Apply Oil Filter | |
pixelate | int | Apply pixelate filter | |
contrast | int | Apply contrast | |
brightness | int | Apply brightness | |
blur | bool | Apply blur | |
sharpening | bool | Apply sharpening | |
invert | bool | Invert image colors | |
glow | bool | Apply Glow | |
BlackWhite | bool | Set image as black and white only | |
Grayscale | bool | Set image as grayscale | |
Lomograph | bool | Apply Lomograph filter | |
Polaroid | bool | Apply Polaroid filter | |
Sepia | bool | Apply Sepia filter | |
Kodachrome | bool | Apply Kodachrome filter | |
Vignette | bool | Apply Vignette filter |
Image Sources
You can define the file data sources for any kind of storage, the default used data source is a local source ( webapp file system ).
As an example you can add the Owin.ThumbCrop.AzureStorage
in your project from NuGet
Install-Package Owin.ThumbCrop.AzureStorage
or dotnet core CLI
dotnet add package Owin.ThumbCrop.AzureStorage
And configure your owin middleware to use de Azure storage data source,
app.UseThumbCrop(config =>
{
config.ImageSources = new[]
{
new AzureStorageImageSource(connectionString, allowedContainers: new []{ "cantainer1", "container2" })
};
});
With this it will get the base image directly from the azure storage with the url http://server/containerName/blobName
Because its possible to define a collection of sources, the middleware will use the first source which responds successfully.
If you want to first search in a local file system and if the file not exists then search in the storage, you have to simple put the sources in order
app.UseThumbCrop(config =>
{
config.ImageSources = new IImageSource[]
{
new LocalFileImageSource(),
new AzureStorageImageSource(connectionString, containerName),
};
});
For other types of storage or sources just implement the IImageSource
interface and add in the ImageSources collection inside config