Skip to content
This repository has been archived by the owner on Feb 20, 2021. It is now read-only.

Latest commit

 

History

History

ASP.NET Image Resizer

README.md

ASP.NET Image Resizer

Requires

  • Visual Studio 2015

License

  • MIT

Technologies

  • ASP.NET

Topics

  • asp.net image resizer

Updated

  • 08/06/2019

Description

ImageUltimate: ASP.NET Image Resizer

ImageUltimate is the fastest and easiest ASP.NET Image Resizer which supports both ASP.NET MVC and ASP.NET WebForms web applications/web sites. ImageUltimate can also be used with .NET desktop applications for manipulating several image formats. Let your web site prepare images automagically for you. Save images once and embrace the responsive web.

  • Chain image manipulation commands to get variations in the brink of an eye.
  • Keep your source images in their original formats (eg. Psd, Raw) and serve the resulting images in any web format.
  • Have SEO friendly urls for your images to improve your rankings.
  • Vastly reduce your outgoing bandwidth usage with the help of smart versioning.

Note: This project contains a fully working version of the product, however without a license key it will run in trial mode. For more information, please see ImageUltimate: ASP.NET Image Resizer product page.

 

Features:

  • Can load and save many image file formats (raster, vector and camera raw).

  • Provides a fluent interface for easily chaining image manipulation commands.

  • Vastly faster (10x) than System.Drawing namespace and optimized specifically for web use. Minimal memory usage and the ability to process very large images in a fast manner.

  • Provides detailed information about an image file like format, size, DPI, pixel format and metadata like EXIF and IPTC.

  • Fast thumbnail generation, smartly looks for a EXIF thumbnail, removes black stripes above and below it and resizes it down further if needed.

  • Provides these image transforms: Resize, LiquidResize (seam carving), Crop, TrimBorders, Rotate, Flip.

  • Provides these image color/tone corrections and filters: Brightness, Contrast, Enhance, Blur, Sharpen.

  • Caches generated images both on server and browser with a smart versioning algorithm. A unique and browser-cacheable url is generated according to the chained commands and whenever you change these commands (or modify the source image externally), the url will vary and this will cause browser to automatically detect changes (no need to press F5).

  • Generates SEO friendly urls. By default the file name of the source image is used but it's possible to override this file name for SEO purposes.

  • Single managed DLL (works both on 32-bit and 64-bit) for easy deployment and no dependencies. No messy Web.config settings. Just drop it in your bin folder and you are ready to go.

  • Strongly-typed API for web, no need to learn and memorize messy url querystring parameters, just chain commands with the help of intellisense.

Supported Formats:

Format Extensions Load Save
Raster Image Formats:
Joint Photographic Experts Group (JPEG) .jpg, .jpeg, .jpe, .jif, .jfif, .jfi, .exif ✓ ✓
JPEG 2000 (JP2) .jp2, .jpf, .jpx, .j2k, .j2c, .jpc ✓ ✓
Portable Network Graphics (PNG) .png ✓ ✓
Graphics Interchange Format (GIF) .gif ✓ ✓
WebP Image .webp ✓ ✓
Bitmap Picture (BMP) .bmp ✓ ✓
Windows Metafile (WMF) .wmf ✓  
Device Independent Bitmap (DIB) .dib ✓ ✓
Windows Icon (ICO) .ico ✓ ✓
Truevision Graphics Adapter (TARGA) .tga ✓ ✓
Adobe Photoshop Document (PSD) .psd, .psb ✓ ✓
Scanner Image Formats:
Tagged Image File Format (TIFF) .tif, .tiff, .tff ✓ ✓
Vector Image Formats:
Scalable Vector Graphics (SVG) .svg ✓ ✓
Windows Enhanced Metafile (EMF) .emf ✓  
Camera Image Formats:
Adobe Digital Negative (Leica) .dng ✓  
Sony Alpha Raw Image Format .arw ✓  
Sony Raw Format .sr2, .srf ✓  
Canon Digital Camera Raw Image Format .cr2, .crw ✓  
Nikon Digital SLR Camera Raw Image File .nef, .nrw ✓  
Fuji CCD-RAW Graphic File .raf ✓  
Olympus Digital Camera Raw Image File .orf ✓  
Pentax Electronic File .pef ✓  
Kodak Digital Camera Raw Image Format .kdc ✓  
Kodak Digital Camera Raw Image Format .dcr ✓  
Minolta/Konica Minolta Raw Image File .mrw ✓  
Epson RAW Format .erf ✓  
Panasonic Lumix Raw Image .rw2 ✓  
Samsung Raw Format .srw ✓  
Sigma Camera RAW Picture File .x3f ✓  
Mamiya Raw Image File .mef ✓  
Camera Raw Image File .raw ✓  
Totals:
31 48 31 12

To use ImageUltimate in an ASP.NET MVC Project, do the following in Visual Studio:

  1. Add references to ImageUltimate assemblies. There are two ways to perform this:

    • Add reference to GleamTech.Core.dll and GleamTech.ImageUltimate.dll found in "Bin" folder of ImageUltimate-vX.X.X.X.zip package which you already downloaded and extracted.

    • Or install NuGet package and add references automatically via NuGet Package Manager in Visual Studio: Go to Tools -> NuGet Package Manager -> Package Manager Console and run this command:

      Install-Package ImageUltimate -Source https://get.gleamtech.com/nuget/default/

      If you prefer using the user interface when working with NuGet, you can also install the package this way:

      •  GleamTech has its own NuGet feed so first you need to add this feed to be able to find GleamTech's packages. Go to Tools -> NuGet Package Manager -> Package Manager Settings and then click the + button to add a new package source. Enter GleamTech in Name field and https://get.gleamtech.com/nuget/default/ in Sourcefield and click OK.

      • Go to Tools -> NuGet Package Manager -> Manage NuGet Packages for Solution, select GleamTech or All in the Package source dropdown on the top right. Now enter ImageUltimate in the search field, and click Installbutton on the found package.

  2. Set ImageUltimate's global configuration. For example, you may want to set the license key and the default path for finding source images (SourcePath). Insert some of the following lines (if overriding a default value is required) into the Application_Start method of your Global.asax.cs:

    //Set this property only if you have a valid license key, otherwise do not
//set it so ImageUltimate runs in trial mode.
ImageUltimateConfiguration.Current.LicenseKey = "QQJDJLJP34...";

    //The default SourcePath value is "/App_Data/ImageSource"
//Both virtual and physical paths are allowed.
//Note that using a path under "/App_Data" can have a benefit,
//for instance if you want to protect your original source files, i.e.
//prevent them from being downloaded directly, you can use this special 
//folder which is restricted by ASP.NET runtime by default.
ImageUltimateWebConfiguration.Current.SourcePath = "~/Content";
    

    //The default CacheLocation value is "/App_Data/ImageCache"
//Both virtual and physical paths are allowed (or a Location instance for one of the supported 
//file systems like Amazon S3 and Azure Blob).
//However it's recommended that you use a path inside your application folder 
//(e.g. "/SomeFolder", "/SomeFolder" or "C:\inetpub\wwwroot\MySite\SomeFolder")
//so that ImageUltimate can use RewritePath to pass download requests directly
//to IIS for higher throughput.
ImageUltimateWebConfiguration.Current.CacheLocation = "~/App_Data/ImageCache";

    Alternatively you can specify the configuration in <appSettings> tag of your Web.config.

    <add key="ImageUltimate:LicenseKey" value="QQJDJLJP34..." />
<add key="ImageUltimateWeb:SourcePath" value="~/Content" />
<add key="ImageUltimateWeb:CacheLocation" value="~/App_Data/ImageCache" />

    As you would notice, ImageUltimate: prefix maps to ImageUltimateConfiguration.Current and ImageUltimateWeb:prefix maps to ImageUltimateWebConfiguration.Current.

  3. Open one of your View pages (eg. Index.cshtml) and at the top of your page add the necessary namespaces:

    @using GleamTech.ImageUltimate
@using GleamTech.ImageUltimate.AspNet
@using GleamTech.ImageUltimate.AspNet.Mvc

    Alternatively you can add the namespaces globally in Views/web.config under<system.web.webPages.razor>/<pages>/<namespaces> tag to avoid adding namespaces in your pages every time:

    <add namespace="GleamTech.ImageUltimate" />
<add namespace="GleamTech.ImageUltimate.AspNet" />
<add namespace="GleamTech.ImageUltimate.AspNet.Mvc" />

    Now in your page insert these lines:

    @this.ImageTag("SomeImage.jpg", task => task.ResizeWidth(300))

    This will resize width of the source image "~/Content/SomeImage.jpg" to 300 pixels (keeping aspect ratio), cache the resulting image and render a  tag in your page. For consecutive page views, the image will be served directly from the cache and no processing will be done. This is the reason the task (second parameter) is specified as a lambda function, it will be only called when necessary for maximum performance. Note that as we specified a non-rooted path for the image path (first parameter), the image is considered relative to ImageUltimateWebConfiguration.Current.SourcePath (as set in step 2). This allows you to write image commands as short lines and avoids parent path repetition.

    Sometimes you may need to render a url instead of a  tag, then use:

    @this.ImageUrl("SomeImage.jpg", task => task.ResizeWidth(300))

    For example, consider you want to add a background image to a CSS class:

    <style>
.someCls
{
    background-image: url(@this.ImageUrl("SomeImage.jpg", task => task.ResizeWidth(300)));
}
</style>

To use ImageUltimate in an ASP.NET WebForms Project, do the following in Visual Studio:

  1. Add references to ImageUltimate assemblies. There are two ways to perform this:

    • Add reference to GleamTech.Core.dll and GleamTech.ImageUltimate.dll found in "Bin" folder of ImageUltimate-vX.X.X.X.zip package which you already downloaded and extracted.

    • Or install NuGet package and add references automatically via NuGet Package Manager in Visual Studio: Go to Tools -> NuGet Package Manager -> Package Manager Console and run this command:

      Install-Package ImageUltimate -Source https://get.gleamtech.com/nuget/default/

      If you prefer using the user interface when working with NuGet, you can also install the package this way:

      •  GleamTech has its own NuGet feed so first you need to add this feed to be able to find GleamTech's packages. Go to Tools -> NuGet Package Manager -> Package Manager Settings and then click the + button to add a new package source. Enter GleamTech in Name field and https://get.gleamtech.com/nuget/default/ in Sourcefield and click OK.

      • Go to Tools -> NuGet Package Manager -> Manage NuGet Packages for Solution, select GleamTech or All in the Package source dropdown on the top right. Now enter ImageUltimate in the search field, and click Installbutton on the found package.

  2. Set ImageUltimate's global configuration. For example, you may want to set the license key and the default path for finding source images (SourcePath). Insert some of the following lines (if overriding a default value is required) into the Application_Start method of your Global.asax.cs:

    //Set this property only if you have a valid license key, otherwise do not
//set it so ImageUltimate runs in trial mode.
ImageUltimateConfiguration.Current.LicenseKey = "QQJDJLJP34...";

    //The default SourcePath value is "/App_Data/ImageSource"
//Both virtual and physical paths are allowed.
//Note that using a path under "/App_Data" can have a benefit,
//for instance if you want to protect your original source files, i.e.
//prevent them from being downloaded directly, you can use this special 
//folder which is restricted by ASP.NET runtime by default.
ImageUltimateWebConfiguration.Current.SourcePath = "~/Content";
    

    //The default CacheLocation value is "/App_Data/ImageCache"
//Both virtual and physical paths are allowed (or a Location instance for one of the supported 
//file systems like Amazon S3 and Azure Blob).
//However it's recommended that you use a path inside your application folder 
//(e.g. "/SomeFolder", "/SomeFolder" or "C:\inetpub\wwwroot\MySite\SomeFolder")
//so that ImageUltimate can use RewritePath to pass download requests directly
//to IIS for higher throughput.
ImageUltimateWebConfiguration.Current.CacheLocation = "~/App_Data/ImageCache";

    Alternatively you can specify the configuration in <appSettings> tag of your Web.config.

    <add key="ImageUltimate:LicenseKey" value="QQJDJLJP34..." />
<add key="ImageUltimateWeb:SourcePath" value="~/Content" />
<add key="ImageUltimateWeb:CacheLocation" value="~/App_Data/ImageCache" />

    As you would notice, ImageUltimate: prefix maps to ImageUltimateConfiguration.Current and ImageUltimateWeb:prefix maps to ImageUltimateWebConfiguration.Current.

  3. Open one of your pages (eg. Default.aspx) and at the top of your page add add the necessary namespaces:

    <%@ Import Namespace="GleamTech.ImageUltimate" %>
<%@ Import Namespace="GleamTech.ImageUltimate.AspNet" %>
<%@ Import Namespace="GleamTech.ImageUltimate.AspNet.WebForms" %>

    Alternatively you can add the namespaces globally in Web.config under <system.web>/<pages>/<namespaces> tag to avoid adding namespaces in your pages every time:

    <add namespace="GleamTech.ImageUltimate" />
<add namespace="GleamTech.ImageUltimate.AspNet" />
<add namespace="GleamTech.ImageUltimate.AspNet.WebForms" />

    Now in your page insert these lines:

    <%=this.ImageTag("SomeImage.jpg", task => task.ResizeWidth(300))%>

    This will resize width of the source image "~/Content/SomeImage.jpg" to 300 pixels (keeping aspect ratio), cache the resulting image and render a  tag in your page. For consecutive page views, the image will be served directly from the cache and no processing will be done. This is the reason the task (second parameter) is specified as a lambda function, it will be only called when necessary for maximum performance. Note that as we specified a non-rooted path for the image path (first parameter), the image is considered relative to ImageUltimateWebConfiguration.Current.SourcePath (as set in step 2). This allows you to write image commands as short lines and avoids parent path repetition.

    Sometimes you may need to render a url instead of a  tag, then use:

    <%=this.ImageUrl("SomeImage.jpg", task => task.ResizeWidth(300))%>

    For example, consider you want to add a background image to a CSS class:

    <style>
    .someCls
    {
        background-image: url(<%=this.ImageUrl("SomeImage.jpg", task => task.ResizeWidth(300))%>);
    }
</style>