Skip to content
This repository has been archived by the owner on Sep 6, 2023. It is now read-only.

ImageProcessor.Web

Jump to bottom
James South edited this page Jun 24, 2013 · 9 revisions

ImageProcessor.Web

ImageProcessor.Web.dll

ImageProcessor.Web.dll contains an ASP.NET HttpModule which captures internal and external requests automagically processing them based on values captured through querystring parameters.

Using the HttpModule requires no code writing at all. Just install the package references the binaries relevant sections in the web.config will be automatically created.

Image requests suffixed with querystring parameters will then be processed and cached to the server - up to 12,960,000 images allowing for easy and efficient parsing of following requests.

The parsing engine for the HttpModule is incredibly flexible and will allow you to add querystring parameters in any order.

Usage

Heres a few examples of the syntax for processing images.

Alpha Transparency

Imageprocessor can adjust the alpha transparency of png images. Simply pass the desired percentage value (without the '%') to the processor.

e.g.

<img src="/images.yourimage.jpg?alpha=60" alt="60% alpha image"/>

Brightness

Imageprocessor can adjust the brightness of images. Simply pass the desired value (-100 to 100) to the processor.

e.g.

<img src="/images.yourimage.jpg?brightness=60" alt="60 brightness"/>

Contrast

Imageprocessor can adjust the contrast of images. Simply pass the desired value (-100 to 100) to the processor.

e.g.

<img src="/images.yourimage.jpg?contrast=60" alt="60 contrast"/>

Crop

Cropping an image is easy. Simply pass the bottom-left and top-right coordinates and the processor will work out the rest.

e.g.

<img src="/images.yourimage.jpg?crop=5-5-200-200" alt="your cropped image"/>

Filters

Everybody loves adding filter effects to photgraphs so we've baked some popular ones into Imageprocessor.

Current filters include:

  • blackwhite
  • comic (requires full trust)
  • lomograph
  • greyscale
  • polaroid
  • sepia
  • gotham
  • hisatch
  • losatch
  • invert

e.g.

<img src="/images.yourimage.jpg?filter=polaroid" alt="classic polaroid look"/>

Flip

Imageprocessor can flip your image either horizontally or vertically.

e.g.

<img src="/images.yourimage.jpg?flip=horizontal" alt="horizontal"/>
<img src="/images.yourimage.jpg?flip=vertical" alt="vertical"/>

Format

Imageprocessor will also allow you to change the format of image on-the-fly. This can be handy for reducing the size of requests.

Supported file format just now are:

  • jpg
  • bmp
  • png
  • gif (requires full trust)

e.g.

<img src="/images.yourimage.jpg?format=gif" alt="your image as a gif"/>

Quality

Whilst Imageprocessor delivers an excellent quality/filesize ratio it also allows you to change the quality of jpegs on-the-fly.

e.g.

<img src="/images.yourimage.jpg?quality=65" alt="your image at quality 30"/>

Resize

<img src="/images.yourimage.jpg?width=200" alt="your resized image"/>

Will resize your image to 200px wide whilst keeping the correct aspect ratio.

Remote files can also be requested and cached by prefixing the src with a value set in the web.config

e.g.

<img src="remote.axd/http://url/images.yourimage.jpg?width=200" alt="your resized image"/>

Will resize your remote image to 200px wide whilst keeping the correct aspect ratio.

Changing both width and height requires the following syntax:

<img src="/images.yourimage.jpg?width=200&height=200" alt="your resized image"/>

Rotate

Imageprocessor can rotate your images without clipping. You can also optionally fill the background color for image types without transparency.

e.g.

<img src="/images.yourimage.jpg?rotate=26" alt="your image rotated"/>
<img src="/images.yourimage.jpg?rotate=angle-54|bgcolor-fff" alt="your image rotated"/>

Rounded Corners

Imageprocessor can round the corners of your images. You can also optionally fill the background color for image types without transparency.

e.g.

<img src="/images.yourimage.jpg?roundedcorners=26" alt="your image rounded"/>
<img src="/images.yourimage.jpg?roundedcorners=radius-26|bgcolor-fff" alt="your image rounded"/>
<img src="/images.yourimage.jpg?roundedcorners=radius-26|bgcolor-fff|tl-true|tr-true|bl-true|br-true" alt="your image rounded"/>

Saturation

Imageprocessor can adjust the saturation of images. Simply pass the desired value (-100 to 100) to the processor.

e.g.

<img src="/images.yourimage.jpg?saturation=60" alt="60 saturation"/>

Vignette

Imageprocessor can also add a vignette effect to images.

e.g.

<img src="/images.yourimage.jpg?vignette=true" alt="your image vignetted"/>

Watermark

Imageprocessor can add watermark text to your images with a wide range of options. Each option can be ommited and can be added in any order. Just ensure that they are pipe "|" separated:

  • text
  • size (px)
  • font (any installed font)
  • opacity (1-100)
  • style (bold|italic|regular|strikeout|underline)
  • shadow
  • position (x,y)

e.g.

<img src="/images.yourimage.jpg?watermark=watermark=text-test text|color-fff|size-36|style-italic|opacity-80|position-30-150|shadow-true|font-arial" alt="watermark"/>

Internally it uses a class named TextLayer to add the watermark text.

Clone this wiki locally