Mattias Lövström
Aug 30, 2010
  9062
(1 votes)

Handling images in EPiServer programmatically

The image editor in edit mode uses EPiServer.ImageLibrary to transform images with the great functionality of let another process then the web application to handle it. Senses the handlings of images are heavy both for the CPU and the memory this is a great feature to be able to configure the web site to do this in another process (or another machine). But it is not yet any documentation for it…

I talked to the EPiServer development team that said the API is stable and they agree to publish it – so I hope it will come out in the SDK son, but when we wait for this documentation I can try to describe how it is working.

Assembly:

EPiServer.ImageLibrary

Classes:

EPiServer.ImageLibrary.ImageServiceClient – The image service client to access the service with

Methods:

public ImageServiceClient(

        string endpointConfigurationName)

The constructor of the end point that takes a string defining the endpoints name, the name used by EPiServer are "ImageServiceClientEndPoint" and can be used if you want the same service to handle the web sites images in the same process as the image editor use.

public byte[] RenderImage(

          byte[] imageBuffer,

          IEnumerable<ImageOperation> operations,

          string mimeType,

          float zoomFactor,

          int jpegQuality)

Returns:

A transformed image

Parameters:

imageBuffer – the original image

operations – operations for transforming the image

mimeType – the mime type of the image. Defined mime type are image/png, image/bmp, image/gif, image/tiff, image/jpg, image/jpeg, image/pjpeg

zoomFactor - the zoom factor 1 means 100%

jpegQuality – the Jpeg quality (if mime types is image/jpg, image/jpeg or image/pjpeg) in %

The image operations implemented are given by the enum EPiServer.ImageLibrary.ImageEditorCommand and has the following options:

None - No action

Grayscale - Convert image to grey scale

Crop - Crop image

FlipX - Flip the image on the X axis

FlipY - Flip the image on the Y axis

Resize - Resize the image

Rotate - Rotate the image

Sample code

This web page rotates an image 180 degrees given its virtual path.

Example to flip support Jens up side down (on a EPiServer sample site)

http://localhost/FlipImage.aspx?ImageVirtualPath=/Global/StartPage/cms6_headerEN.jpg

<%@ Page Language="C#" AutoEventWireup="true" Inherits="System.Web.UI.Page" %>
<%@ Import Namespace="EPiServer.ImageLibrary" %>
<%TransformAndViewImage(HttpContext.Current.Request["ImageVirtualPath"]); %>
 
<script runat="server">
    public void TransformAndViewImage(string imageVirtualPath)
    {
        // Operations used to change the image
        ImageOperation[] operations = new ImageOperation[]{
            new ImageOperation(ImageEditorCommand.Rotate) { Angle = 180 }};
        float zoomFactor = 0.5f; //Percent / 100
        string imageMimeType = System.Net.Mime.MediaTypeNames.Image.Jpeg;
        int jpegQuality = 100; //Percent
 
        // ImageServiceClientEndPoint is the same endpoint name that the image editor uses 
        ImageServiceClient imageService = new ImageServiceClient("ImageServiceClientEndPoint");
 
        //// Load the image and apply requested changes
        using (System.IO.Stream fileStream = System.Web.Hosting.HostingEnvironment.VirtualPathProvider.GetFile(imageVirtualPath).Open())
        {
            byte[] orginalImage = new byte[fileStream.Length];
            fileStream.Read(orginalImage, 0, (int)fileStream.Length);
            byte[] imageBuffer = imageService.RenderImage(
                  orginalImage,
                  operations,
                  imageMimeType,
                  zoomFactor,
                  jpegQuality);
 
            Response.ContentType = imageMimeType;
            Response.Cache.SetCacheability(HttpCacheability.ServerAndNoCache);
            Response.OutputStream.Write(imageBuffer, 0, (int)imageBuffer.Length);
            Response.End();
        }
    }
</script>
Aug 30, 2010

Comments

Joel Abrahamsson
Joel Abrahamsson Sep 21, 2010 10:33 AM

Thanks for posting this Mattias! I didn't know that the ImageLibrary stuff ran in it's own process which certainly is interesting. I might do a follow up post on this one with some interesting usage examples.

Marthin Freij
Marthin Freij Sep 21, 2010 10:33 AM

Nice! Please note that ImageServiceClient will use ImageService if the endpointName is not found in configuration, which means that default configuration will process images within the same process as the application. Mattias, could you please provide some sample configuration for the endpoints as well?

Marthin Freij
Marthin Freij Sep 21, 2010 10:33 AM

Great! ;-)

Petter Klang
Petter Klang Sep 21, 2010 10:33 AM

Nice!
Will there be support added for Actually flipping Jens 180 degrees? Perhaps Greger or Sebastian can help you on that?

Feb 8, 2011 08:39 AM

Thanks for this great post. Would be lost without it. Going to use this for EPiImage 2.0 :-)

Please login to comment.
Latest blogs
Customizing Property Lists in Optimizely CMS

Generic property lists is a cool editorial feature that has gained a lot of popularity - in spite of still being unsupported (officially). But if y...

Allan Thraen | Oct 2, 2022 | Syndicated blog

Content Delivery API – The Case of the Duplicate API Refresh Token

Creating a custom refresh provider to resolve the issues with duplicate tokens in the DXC The post Content Delivery API – The Case of the Duplicate...

David Lewis | Sep 29, 2022 | Syndicated blog

New Optimizely certifications - register for beta testing before November 1st

In January 2023, Optimizely is making updates to the current versions of our certification exams to make sure that each exam covers the necessary...

Jamilia Buzurukova | Sep 28, 2022

Optimizely community meetup - Sept 29 (virtual + Melbourne)

Super excited to be presenting this Thursday the 29th of September at the Optimizely community meetup. For the full details and RSVP's see the...

Ynze | Sep 27, 2022 | Syndicated blog

Preview multiple Visitor Groups directly while browsing your Optimizely site

Visitor groups are great - it's an easy way to add personalization towards market segments to your site. But it does come with it's own set of...

Allan Thraen | Sep 26, 2022 | Syndicated blog

The Report Center is finally back in Optimizely CMS 12

With Episerver.CMS.UI 12.12.0 the Report Center is finally re-introduced in the core product.

Tomas Hensrud Gulla | Sep 26, 2022 | Syndicated blog