Image Resize for Asp.Net Core

This page will demonstrate different samples for ImageResize settings.

Related article : Image Resize for NetCore
Github repository : LazZiya.ImageResize

Installation :

install from nuget package manager:

    PM > Install-Package LazZiya.ImageResize -Version 2.0.0

Introduction

All ImageResize methods recevies a System.Drawing.Image file and do the appropriate operation accordingly.
System.Drawing.Image can be created from local file as below :


    using System.Drawing;

    //create Image file from local file
    var imgFile = Image.FromFile("wwwroot\\Images\\picture.jpg");

or from upload stream :

    //create Image file from upload stream
    foreach (var file in Request.Form.Files) {
    if (file.Length > 0) {
        using (var stream = file.OpenReadStream()) {
    
        var uploadedImage = Image.FromStream(stream);

        }    
    }
}

Samples

for all below samples I used image from unsplach photo by LUM3N, original size 6000x4000, the image saved in local folder under wwwroot\\Images\\lum3n-358833-unsplash.jpg

ImageResize supports resizing images in several ways, all scale methods will keep the aspect ratio of the original image, except Crop method which will have a new aspect ratio according to the crop size.;

Scale

Auto scale down image to fit target size and keep original aspect ratio


        //get image from local path
        var img = Image.FromFile("wwwroot\\images\\lum3n-358833-unsplash.jpg");

        //resize the image to 600x400 
        var newImg = ImageResize.Scale(img, 600, 400);

        //save new image
        newImg.SaveAs("wwwroot\\images\\600x400-scale.jpg");

        //dispose to free up memory
        img.Dispose();
        newImg.Dispose();
        

Result


Scale by Width

Scale down by given width parameter and keep original aspect ratio


        //get image from local path
        var img = Image.FromFile("wwwroot\\images\\lum3n-358833-unsplash.jpg");

        //scale by width, new width = 300 
        var newImg = ImageResize.ScaleByWidth(img, 300);

        //save new image
        newImg.SaveAs("wwwroot\\images\\300-scale-by-width.jpg");

        //dispose to free up memory
        img.Dispose();
        newImg.Dispose();
        
Result image size 300x200

Scale by Height

Scale down by given height parameter and keep original aspect ratio


        //get image from local path
        var img = Image.FromFile("wwwroot\\images\\lum3n-358833-unsplash.jpg");

        //scale by width, new height = 300 
        var newImg = ImageResize.ScaleByHeight(img, 300);

        //save new image
        newImg.SaveAs("wwwroot\\images\\300-scale-by-height.jpg");

        //dispose to free up memory
        img.Dispose();
        newImg.Dispose();
        
Result image size: 450x300

Scale and Crop

Scale down by given width and height parameters. Final image will have a new aspect ratio


        //get image from local path
        var img = Image.FromFile("wwwroot\\images\\lum3n-358833-unsplash.jpg");

        //scale and crop, 250x250 center focus 
        var newImg = ImageResize.ScaleAndCrop(img, 250, 250, TargetSpot.Center);

        //save new image
        newImg.SaveAs("wwwroot\\images\\250x250-scale-and-crop-center.jpg");

        //dispose to free up memory
        img.Dispose();
        newImg.Dispose();
        
Result image size: 250x250

Crop

Crop specified area from the the image by gives sizes


        //get image from local path
        var img = Image.FromFile("wwwroot\\images\\lum3n-358833-unsplash.jpg");

        //crop, 250x250 center focus 
        var newImg = ImageResize.Crop(img, 250, 250, TargetSpot.Center);

        //save new image
        newImg.SaveAs("wwwroot\\images\\250x250-crop-center.jpg");

        //dispose to free up memory
        img.Dispose();
        newImg.Dispose();
        
Result image size: 250x250

Text Watermark

Add text watermark to the bottom area of the image. First we will resize the image to 600x250 then watermark will be applied.


        //get image from local path
        var img = Image.FromFile("wwwroot\\images\\lum3n-358833-unsplash.jpg");

        //scale and crop, 600x250 center focus 
        var newImg = ImageResize.ScaleAndCrop(img, 600, 250, TargetSpot.Center);

        //add text watermark
        newImg.TextWatermark("Powered by LazZiya.ImageResize", 
                "#77ffffff", //text color hex8 value, 77 is opacity (00-FF)
                "#22000000", //background color, 22 is for opacity (00-FF)
                "Calibri",   //font family
                34,          //font size
                TargetSpot.BottomLeft, //target spot to place text watermark text
                FontStyle.Italic,      //font style
                10);                   //bg margin from border
        //save new image
        newImg.SaveAs("wwwroot\\images\\600x250-text-watermark.jpg");

        //dispose to free up memory
        img.Dispose();
        newImg.Dispose();
        
Result image size: 600x250

Image Watermark

Add image watermark to the top right area of the image. First we will resize the image to 600x250 then watermark will be applied.


        //get image from local path
        var img = Image.FromFile("wwwroot\\images\\lum3n-358833-unsplash.jpg");

        //scale and crop, 600x250 center focus 
        var newImg = ImageResize.ScaleAndCrop(img, 600, 250, TargetSpot.Center);

        //watermark image path
        var imgWatermark = "wwwroot\\images\\icon.png";

        //add image watermark
        newImg.ImageWatermark(imgWatermark, 
                TargetSpot.TopRight, //define target spot
                10,                  //margin
                37);                 //opacity (0-100)

        //save new image
        newImg.SaveAs("wwwroot\\images\\600x250-image-watermark.jpg");

        //dispose to free up memory
        img.Dispose();
        newImg.Dispose();
        
Result image size: 600x250

Sample with multilingual watermark texts 😉

Sample watermark texts in multiple languages: Arabic, Turkish and Chinese