mirror of https://github.com/abpframework/abp
Engincan VESKE
2 years ago
parent
13fe1e6d7b
commit
2e83c697da
@ -0,0 +1,293 @@
|
||||
# Image Compression and Resize with ABP Framework
|
||||
|
||||
## Introduction
|
||||
|
||||
In this article, I will show how to compress and resize images easily with the ABP Framework's new [Image Manipulation System](https://docs.abp.io/en/abp/7.3/Image-Manipulation), which is introduced in v7.3.0.
|
||||
|
||||
ABP Framework provides services to compress and resize images and implements these services with popular [ImageSharp](https://sixlabors.com/products/imagesharp/) and [Magick.NET](https://github.com/dlemstra/Magick.NET) libraries. Currently, only these two providers are officially supported by the ABP Frameework but thanks to the system being designed extensible, you can implement your own image resizer/compressor and use it in your application.
|
||||
|
||||
> Refer to the documentation for more info: [Image Manipulation](https://docs.abp.io/en/abp/7.3/Image-Manipulation)
|
||||
|
||||
### Source Code
|
||||
|
||||
You can find the source code of the application at [https://github.com/abpframework/abp-samples/tree/master/ImageManipulation](https://github.com/abpframework/abp-samples/tree/master/ImageManipulation). Don't hesitate to check the source code, if you stuck on any point.
|
||||
|
||||
## Demo: Image Compression and Resize
|
||||
|
||||
Best way to see what ABP's Image Manipulation System capable of is to see it in action. Thus, we can create a simple application that basically allow us to upload, search and display images.
|
||||
|
||||
### Creating a New ABP Solution
|
||||
|
||||
> I have created an ABP solution and you can find the [full source code of the demo application here](https://github.com/abpframework/abp-samples/tree/master/ImageManipulation). If you want to create the same solution from scratch, you can apply the following steps:
|
||||
|
||||
Install the ABP CLI, if you haven't installed it before:
|
||||
|
||||
```bash
|
||||
dotnet tool install -g Volo.Abp.Cli
|
||||
```
|
||||
|
||||
Create a new solution with the ABP Framework's Application Startup Template with MVC UI and EF Core database (default options):
|
||||
|
||||
```bash
|
||||
abp new ImageManipulationDemo -t app --version 7.3.0-rc.2
|
||||
```
|
||||
|
||||
> As I have mentioned above, ABP introduced the Image Manipulation System in v7.3.0. So, ensure your application is v7.3.0 or higher.
|
||||
|
||||
After creating the application, let's create the database and seed the initial data by running the `*.DbMigrator` project. Also, you can run the application to see it's working as expected.
|
||||
|
||||
### Configuring the BLOB Storing System
|
||||
|
||||
Since, we are creating a image upload application, we need to store our images in somewhere and read these image contents when its needed. [BLOB Storing System](https://docs.abp.io/en/abp/latest/Blob-Storing) is a great solution to achieve this. Let's install & configure the BLOB Storing System into our application.
|
||||
|
||||
First, run the following command under the directory of your `*.HttpApi` project:
|
||||
|
||||
```bash
|
||||
abp add-package Volo.Abp.BlobStoring
|
||||
```
|
||||
|
||||
Then, we need to select and configure a storage provider to tell the BLOB Storing System to where to store the file contents. There are [multiple providers](https://docs.abp.io/en/abp/latest/Blob-Storing#blob-storage-providers) that we can choose. For the simplicity of the demo, let's continue with the **database provider** and run the following command under the directory of your solution (`*.sln`):
|
||||
|
||||
```bash
|
||||
abp add-module Volo.Abp.BlobStoring.Database
|
||||
```
|
||||
|
||||
* This command adds all the NuGet packages to the corresponding layers of your solution.
|
||||
* Also, it makes the necessary configurations, adds a new database migration and updates the database.
|
||||
* Since, we are not configuring the connection string, the BLOB Storing system will use the default connection string in our application.
|
||||
|
||||
That's it. We have installed and configured the BLOB Storing System in our applicaton.
|
||||
|
||||
### Configuring the Image Manipulation System
|
||||
|
||||
After, configuring the BLOB Storing System, now we can install and configure the Image Manipulation System for to be able to compress and resize images.
|
||||
|
||||
ABP Framework provides two image resizer/compressor implementations out of the box: [ImageSharp](https://docs.abp.io/en/abp/7.3/Image-Manipulation#imagesharp-provider) and [Magick.NET](https://docs.abp.io/en/abp/7.3/Image-Manipulation#magick-net-provider).
|
||||
|
||||
We can use the `Volo.Abp.Imaging.ImageSharp` as the provider for our application. To install the package, run the following command under the `*.HttpApi` project:
|
||||
|
||||
```bash
|
||||
abp add-package Volo.Abp.Imaging.ImageSharp
|
||||
```
|
||||
|
||||
* This package will provide the required services to compress and resize images.
|
||||
* You can [configure the `ImageSharpCompressOptions`](https://docs.abp.io/en/abp/7.3/Image-Manipulation#configuration-1) to define *DefaultQuality* and encoders.
|
||||
|
||||
|
||||
After installing the provider, now we can use the services to compress and resize our images, such as `IImageCompression` and `IImageResizer`. But there is an easier way. `Volo.Abp.Imaging.AspNetCore` NuGet package defines some attributes for controller actions that can automatically compress and/or resize uploaded files.
|
||||
|
||||
To be able to use these attributes, we need to install the `Volo.Abp.Imaging.AspNetCore` package. Type the following command under the `*.HttpApi` project:
|
||||
|
||||
```bash
|
||||
abp add-package Volo.Abp.Imaging.AspNetCore
|
||||
```
|
||||
|
||||
This package provides two attributes: `[CompressImage]` and `[ResizeImage]`. Whenever we use these attributes, the Image Manipulation System will automaticall compress and/or resize uploaded files.
|
||||
|
||||
### Image Upload (with Compress & Resize)
|
||||
|
||||
After all the required package installations and configurations are done, now we can start implementing the API and UI for Image Upload.
|
||||
|
||||
Let's start with creating the API. Create a controller in the `*.HttpApi` project named `ImageController` and perform image upload and image display operations:
|
||||
|
||||
```csharp
|
||||
using Microsoft.AspNetCore.Http;
|
||||
using Microsoft.AspNetCore.Mvc;
|
||||
using System.Threading.Tasks;
|
||||
using Volo.Abp.BlobStoring;
|
||||
using Volo.Abp.Imaging;
|
||||
|
||||
namespace ImageManipulationDemo.Controllers
|
||||
{
|
||||
[Controller]
|
||||
[Route("api/image")]
|
||||
public class ImageController : ImageManipulationDemoController
|
||||
{
|
||||
private readonly IBlobContainer<ImageManipulationContainer> _blobContainer;
|
||||
|
||||
public ImageController(IBlobContainer<ImageManipulationContainer> blobContainer)
|
||||
{
|
||||
_blobContainer = blobContainer;
|
||||
}
|
||||
|
||||
[HttpPost("upload")]
|
||||
[CompressImage]
|
||||
[ResizeImage(width: 200, height: 200)]
|
||||
public async Task<IActionResult> UploadAsync(IFormFile file)
|
||||
{
|
||||
var fileBytes = await file.GetAllBytesAsync();
|
||||
var blobName = file.FileName;
|
||||
|
||||
await _blobContainer.SaveAsync(blobName, fileBytes, overrideExisting: true);
|
||||
|
||||
return Ok();
|
||||
}
|
||||
|
||||
[HttpGet("")]
|
||||
public async Task<byte[]> GetImageAsync(string fileName)
|
||||
{
|
||||
return await _blobContainer.GetAllBytesAsync(fileName);
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
* Here, we have used both `CompressImage` and `ResizeImage` attributes to automaticall compress & resize the uploaded file.
|
||||
* As you can see, we used the `IBlobContainer<TContainer>` service to save our file content.
|
||||
* Since, we are using the *database provider* as BLOB storing provider, the file contents will be added into our database and then we will be able to fetch them whenever its needed like we have done in the `GetImageAsync` method above.
|
||||
* We simply used the required attributes (and they do the rest behalf of us and call the related image resize and compress services) to resize & compress images and saved the new resized/compressed image into the database.
|
||||
|
||||
Before implementing the UI side, as you may notice, we injected the `IBlobContainer` as typed service (`IBlobContainer<ImageManipulationContainer>`). Typed BLOB container system is a way of creating and managing multiple containers in an application and we haven't created the `ImageManipulationContainer` class yet.
|
||||
|
||||
Let's create this class as below:
|
||||
|
||||
```csharp
|
||||
using Volo.Abp.BlobStoring;
|
||||
|
||||
namespace ImageManipulationDemo
|
||||
{
|
||||
[BlobContainerName("image-manipulation-demo")]
|
||||
public class ImageManipulationContainer
|
||||
{
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
* We have used the `BlobContainerName` attribute to define the name of the container.
|
||||
* If we haven't use the `BlobContainerName` attribute, ABP Framework uses the full name of the class with its namespace.
|
||||
|
||||
We have implemented the endpoints and now can start implementing the UI side. You can see the following figure to see what we are going to design for the image upload page:
|
||||
|
||||
|
||||
|
||||
Let's start designing this page. Open the `Index.cshtml` file (*/Pages/Index.cshtml*) under the `*.Web` project and update the file content with the following:
|
||||
|
||||
```html
|
||||
@page
|
||||
@using Microsoft.AspNetCore.Mvc.Localization
|
||||
@using ImageManipulationDemo.Localization
|
||||
@using Volo.Abp.Users
|
||||
@model ImageManipulationDemo.Web.Pages.IndexModel
|
||||
@inject IHtmlLocalizer<ImageManipulationDemoResource> L
|
||||
@inject ICurrentUser CurrentUser
|
||||
@section styles {
|
||||
<abp-style src="/Pages/Index.css" />
|
||||
}
|
||||
@section scripts {
|
||||
<abp-script src="/Pages/Index.js" />
|
||||
}
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<form method="post" id="upload-image" enctype="multipart/form-data">
|
||||
<div class="mb-3">
|
||||
<label for="formFile" class="form-label">Upload an image</label>
|
||||
<input class="form-control" type="file" id="formFile" required/>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<button type="submit" class="btn btn-primary d-block w-100">Submit</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-title">
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title my-2">Search & Display Images</h5>
|
||||
|
||||
<form method="get" id="search-image">
|
||||
<div class="input-group mb-3">
|
||||
<input id="img-search-input" type="text" class="form-control" placeholder="Search with image name... E.g. image.png" aria-label="Search with image name" aria-describedby="button-search" required>
|
||||
<button class="btn btn-outline-secondary" type="submit" id="button-search">Search</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="d-none" id="image-result">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Then, open the `index.js` file and update with the following content:
|
||||
|
||||
```js
|
||||
$(function () {
|
||||
|
||||
$("#upload-image").submit(function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
var file = document.getElementById("formFile").files[0];
|
||||
var formData = new FormData();
|
||||
formData.append("file", file);
|
||||
|
||||
$.ajax(
|
||||
{
|
||||
url: "/api/image/upload",
|
||||
data: formData,
|
||||
processData: false,
|
||||
contentType: false,
|
||||
type: "POST",
|
||||
success: function (data) {
|
||||
abp.message.success("Image saved successfully!");
|
||||
},
|
||||
error: function (err) {
|
||||
abp.message.error("An error occured while saving the image.");
|
||||
}
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
$("#search-image").submit(function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
var imgResult = $("#image-result");
|
||||
imgResult.removeClass("d-none");
|
||||
|
||||
imgResult.html("<p>Loading...</p>");
|
||||
|
||||
var fileName = $("#img-search-input").val();
|
||||
|
||||
imageManipulationDemo.controllers.image.getImage(fileName)
|
||||
.then(function (imageFile) {
|
||||
var src = "data:image/png;base64," + imageFile;
|
||||
var img = "<img src='" + src + "' />";
|
||||
|
||||
imgResult.html(img);
|
||||
})
|
||||
.catch(function (err) {
|
||||
imgResult.html("<p>Could not find the image...</p>");
|
||||
});
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
Now, we can run the application and see the Image Manipulation System in action:
|
||||
|
||||
|
||||
|
||||
The results are impressive for the example above:
|
||||
|
||||
* The original image was 12 KB and now the compressed & resized image reduced to 8 KB.
|
||||
* The original image was 225x225 and now resized as 200x200.
|
||||
|
||||
## Conclusion
|
||||
|
||||
In this article, I have showed you how to compress and/or resize images with ABP Framework's Image Manipulation System by just defining some attributes to top of the controller actions.
|
||||
|
||||
Also, I have showed that you can use BLOB Storing System to store file contents and compress/resize images before saving them into BLOB Storages thanks to the image resizers/compressors that provided by ABP Framework.
|
||||
|
||||
## See Also
|
||||
|
||||
* [BLOB Storing](https://docs.abp.io/en/abp/latest/Blob-Storing)
|
||||
* [Image Manipulation](https://docs.abp.io/en/abp/7.3/Image-Manipulation#iimageresizer)
|
||||
|
After Width: | Height: | Size: 625 KiB |
|
After Width: | Height: | Size: 22 KiB |
Loading…
Reference in new issue