How to Reduce Image Size Before Uploading Blazor Rich Text Editor?

By default, the Blazor Rich Text Editor does not provide functionality to change the image size directly. However, this can be accomplished on the server-side during the upload process. Below is a guide on how to resize images using C#.

Steps to Resize Images on the Server-Side

1. Retrieve the Image Stream: When an image is uploaded, access the image stream.
2. Use Bitmap for Resizing: Utilize the Bitmap class to create a new image with the desired dimensions.
3. Draw the Image: Use the DrawImage method to generate a lower size image.
4. Save the Resized Image: Save the resized image to the server.

Sample Code

Here is a sample implementation in C#:

public void Save(IList<IFormFile> UploadFiles)
{
    try
    {
        foreach (var file in UploadFiles)
        {
            if (UploadFiles != null)
            {
                string targetPath = hostingEnv.ContentRootPath + "\\wwwroot\\Images";
                string filename = ContentDispositionHeaderValue.Parse(file.ContentDisposition).FileName.Trim('"');

                // Create a new directory if it does not exist
                if (!Directory.Exists(targetPath))
                {
                    Directory.CreateDirectory(targetPath);
                }

                // Name used to save the image
                filename = targetPath + $@"\{filename}";

                if (!System.IO.File.Exists(filename))
                {
                    // Upload the image if the same file name does not exist
                    using (FileStream fs = System.IO.File.Create(filename))
                    {
                        file.CopyTo(fs);
                        fs.Flush();
                    }
                    Response.StatusCode = 200;
                }
                else
                {
                    Response.StatusCode = 204;
                }

                Stream strm = file.OpenReadStream();
                var scaleFactor = 0.1; // Adjust scale factor as needed

                using (var image = Image.FromStream(strm))
                {
                    // Set new dimensions
                    var newWidth = (int)(image.Width * scaleFactor);
                    var newHeight = (int)(image.Height * scaleFactor);
                    var thumbnailImg = new Bitmap(newWidth, newHeight);
                    var thumbGraph = Graphics.FromImage(thumbnailImg);

                    // Set quality settings
                    thumbGraph.CompositingQuality = CompositingQuality.HighQuality;
                    thumbGraph.SmoothingMode = SmoothingMode.HighQuality;
                    thumbGraph.InterpolationMode = InterpolationMode.HighQualityBicubic;

                    var imageRectangle = new Rectangle(0, 0, newWidth, newHeight);
                    thumbGraph.DrawImage(image, imageRectangle);
                    thumbnailImg.Save(filename, image.RawFormat);
                }
            }
        }
    }
    catch (Exception e)
    {
        Response.Clear();
        Response.ContentType = "application/json; charset=utf-8";
        Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = e.Message;
    }
}

Important Note

Make sure to install the System.Drawing.Common package by Microsoft in your application to utilize the image processing functionalities.

Additional References

• Microsoft Documentation on System.Drawing.Common

Conclusion

I hope you enjoyed learning how to reduce image size before uploading Blazor Rich Text Editor.

You can refer to our Blazor Rich Text Editor Feature Tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.

You can also explore our Blazor Rich Text Editor Example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page.

If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!