Piranha has built in support for scaling and cropping uploaded images on demand. The new image is saved in the configured media storage so that it can be reused on subsequent requests. To enable image processing you need to register a service that implements Piranha.IImageProcessor
.
To read more about how the implement custom image processing services for your application, please refer to Image Processing under the Extensions section.
Images can be scaled by calling the MediaService
in the Api
.
// Scales the image to the given width
var scaledUrl = api.Media.EnsureVersion(id, width);
var scaledAsync = await api.Media.EnsureVersionAsync(id, width);
// Scales and crops the image to the given width & height
var scaledCroppedUrl = api.Media.EnsureVersion(id, width, height);
var scaledCroppedAsync = await api.Media.EnsureVersionAsync(id, width, height);
Please note that since the IStorage
& IStorageSession
interfaces are async, the synchronous versions of the methods are merely wrappers around the async versions.
The ApplicationService
provides wrappers for the methods available in the MediaService for usage in .cshtml
views. As the ApplicationServices has access to the current IApi
there's no need for injecting an Api when using the service.
@model MyProject.Models.MyPage
@inject Piranha.AspNetCore.Services.IApplicationService WebApp
<div>
<img src="@Url.Content(WebApp.Media.ResizeImage(Model.PrimaryImage, 400))">
</div>
The ImageField
also has a method for scaling & cropping images. This is merely a wrapper for the methods available in the MediaService
but it can still be useful when calling from a .cshtml
view.
@model MyProject.Models.MyPage
@inject Piranha.IApi Api
<div>
<img src="@Url.Content(Model.PrimaryImage.Resize(Api, 400))">
</div>