Project Description


The BBImageHandler for DotNetNuke and ASP.NET gives users and module programmers the opportunity to use a handler that displays resized images, adds watermarks to images, creates  thumbnails of web pages or displays images stored in a database table without storing them to harddisk. Additionally it could be used to create a counter display.

The project is based on the Microsoft.Web.GeneratedImage Project here on Codeplex. I added a few things to that base implementation of an image handler. Rendering of gif images is improved with OctreeQuantizer, some special handlers are added and security functionality was added. Some parameters are now configurable through web.config. Barcode generation (Version 1.3) is done by open source library ZXing.NET

Even this project is declared as DNN project, it is usable by every ASP.NET application. But I added a DNN installation manifest to the downloadable install file so it could be installed in DNN with the normal installation process.

Whats new ?

Version 01.05.01 (25.03.2014):
- Fixed a bug that prevented showing an Image stored in the database.
- Added display of weekend days in booking schedule display

Version 01.05.00 (24.02.2014):
- Added generation of a “booking schedule”,  showing free, reserved + occupied state of an object for every day of 1 year

Version 01.04.00 (28.01.2014):
- Added defaultImage parameter for an image to be displayed if error or image not available
- Changed DNN Profile picture parameter from "db=ConnectionName" to "dnn=1" (e.g <img src="bbimagehandler.ashx?dnn=1&userid=7&portalid=0&height=150&defaultimage=images/no_avatar.gif" />
- Added some tolerance when parsing the file or path parameter (relative path starts at Request.PhysicalApplicationPath)
- Added ImageUrl parameter for display of an image from another website
- As alternative to File parameter you can use path + index (2nd image in folder xyz, alphabetical order)

Version 01.03.00 (20.01.2014):
- Added generation of barcodes : upca, ean8, ean13, code39, code128, itf, codabar, plessey, msi, qrcode, pdf417, aztec, datamatrix

Version 01.02.00 (25.09.2013):
- Added possibility to show dnn profile picture by userid and portalid
- Added parameters maxwidth and maxheight to delimit image size to maximum values
- fixed a bug when using gif images on 64 bit machines

Version 01.01.00 (01.09.2013):
- Added security for db-type image generation
- Added gamma,contrast,brightness,inverting + flipping images
- Added percentage indicator generation
- Added placeholder image generation
- Improved webpage thumbnail generation

Version 01.00.01 (23.06.2011):
- Initial release

Installation


for DNN: Use the normal installation of DNN
for all other ASP.NET Websites: Unzip install file, copy DLL to bin-folder, copy bbimagehandler.ashx file to web root and add the following to your web.config’s appSettings section:

<add key="BBImageHandler" value="EnableClientCache=true;EnableServerCache=true;EnableSecurity=true;EnableSecurityExceptions=true;ImageCompression=90&AllowedDomains=bitboxx.com" />

Parameters:

  • EnableClientCache: Set to true if client caching should be enabled
  • EnableServerCache: Set to true if server caching should be enabled
  • EnableSecurity: If set to true, only using bbimagehandler in a web page is allowed. Direct usage (eg: entering address in browser, no referer) is prohibited.  Also using it in a different domain is not possible (web page from http://www.domain-a.com uses http://www.domain-b.com/bbimagehandler.ashx...)
  • EnableSecurityExceptions: Set to true if security exceptions should be thrown
  • ImageCompression: quality of resulting image (0..100)
  • AllowedDomains: Comma separated list of Domains that should be permitted to use the imagehandler. Use "domain.com" to permit including all subdomains an "www.domain.com" to allow only referers from this special subdomain

Usage


Resizing Image:

Resized Image including width-Tag:
<img src="bbimagehandler.ashx?File=Winter.jpg&width=150" />

image

Resized Image including height-Tag:
<img src="bbimagehandler.ashx?File=Winter.jpg&height=150" />

image

Resized Image with Border, BackColor and ResizeMode:
<img src="bbimagehandler.ashx?File=Winter.jpg&width=150&ResizeMode=FitSquare&BackColor=#F58719&border=10" /> (Escape '#' with '%23' in Url!)

image

Parameters:

  • file: physical path including image name (relative path starts at Request.PhysicalApplicationPath)
  • or path: path (absolute or relative path to image directory) and index: index of file in directory (alphabetical order)
  • width: width in pixel of resulting image
  • height: height in pixel of resulting image
  • maxwidth and maxheight: instead of width and / or height you can use maxwidth and/or maxheight to leave the picture as it is until the width or height reaches the max value.
  • resizemode:
    • fit: Fit mode maintains the aspect ratio of the original image while ensuring that the dimensions of the result do not exceed the maximum values for the resize transformation. (Needs width or height parameter)
    • fitsquare: Resizes the image with the given width as its longest side (depending on image direction) and maintains the aspect ratio. The image will be centered in a square area of the chosen background color (Needs width parameter, backcolor optional)
    • crop: Crop resizes the image and removes parts of it to ensure that the dimensions of the result are exactly as specified by the transformation.(Needs width and height parameter)
  • backcolor: color of background or/and  border when resizemode is fitsquare or fit.
  • border: border width in pixels around the image (added to width / height) when resizemode is fitsquare or fit.
  • format: jpg,png,bmp or gif, defines the format of the resulting image

 


Gamma correction

<img src="bbimagehandler.ashx?File=Winter.jpg&height=150&gamma=2.5" />

image

Parameters:

  • Gamma: Value for gamma adjustment between 0.2 and 5

Brightness correction

<img src="bbimagehandler.ashx?File=Winter.jpg&height=150&brightness=128" />

image

Parameters:

  • Brightness: Value for brightness adjustment between -255 and +255

Contrast correction

<img src="bbimagehandler.ashx?File=Winter.jpg&height=150&contrast=75" />

image

Parameters:

  • Contrast: Value for contrast adjustment between -100 and +100

Greyscale

<img src="bbimagehandler.ashx?File=Winter.jpg&height=150&greyscale=1" />

image

Parameters:

  • Greyscale: Add any value

Invert

<img src="bbimagehandler.ashx?File=Winter.jpg&height=150&invert=1" />

image

Parameters:

  • Invert: Add any value

Rotate / Flip

<img src="bbimagehandler.ashx?File=Winter.jpg&height=150&rotateflip=RotateNoneFlipY" />

image

Parameters:

  • RotateNoneFlipNone: Specifies no clockwise rotation and no flipping.
  • Rotate90FlipNone: Specifies a 90-degree clockwise rotation without flipping.
  • Rotate180FlipNone: Specifies a 180-degree clockwise rotation without flipping.
  • Rotate270FlipNone: Specifies a 270-degree clockwise rotation without flipping.
  • RotateNoneFlipX: Specifies no clockwise rotation followed by a horizontal flip.
  • Rotate90FlipX: Specifies a 90-degree clockwise rotation followed by a horizontal flip.
  • Rotate180FlipX: Specifies a 180-degree clockwise rotation followed by a horizontal flip.
  • Rotate270FlipX: Specifies a 270-degree clockwise rotation followed by a horizontal flip.
  • RotateNoneFlipY: Specifies no clockwise rotation followed by a vertical flip.
  • Rotate90FlipY: Specifies a 90-degree clockwise rotation followed by a vertical flip.
  • Rotate180FlipY: Specifies a 180-degree clockwise rotation followed by a vertical flip.
  • Rotate270FlipY: Specifies a 270-degree clockwise rotation followed by a vertical flip.
  • RotateNoneFlipXY: Specifies no clockwise rotation followed by a horizontal and vertical flip.
  • Rotate90FlipXY: Specifies a 90-degree clockwise rotation followed by a horizontal and vertical flip.
  • Rotate180FlipXY: Specifies a 180-degree clockwise rotation followed by a horizontal and vertical flip.
  • Rotate270FlipXY: Specifies a 270-degree clockwise rotation followed by a horizontal and vertical flip.

Using watermarks:

<img src="bbimagehandler.ashx?File=Winter.jpg&height=150&watermarktext=watermark&watermarkfontcolor=white&watermarkposition=topleft" />

image

Parameters:

  • watermarkposition: TopLeft, TopCenter, TopRight, CenterLeft, Center, CenterRight, BottomLeft, BottomCenter, BottomRight
  • watermarktext: The text to display as watermark
  • watermarkfontfamily: the font name used for watermarktext. (Default:Verdana)
  • watermarkfontcolor: color name or html-color with leading '#' (eg. 'red', '#F0F0F0') (Default:Black)
  • watermarkfontsize: font size (Default: 14)
  • watermarkopacity: grade of opacity (0..255) (0 is transparent)

Images stored in Database

If your image is stored in a database field (SqlDbType:Image), you can use the following syntax:
<img src="bbimagehandler.ashx?db=SiteSqlServer&table=MyImages&ImageField=ImageData&idField=ImageID&idValue=3&height=150" />

image

Parameters:

  • db: key of connectionstring section in web.config (for DNN normally 'SiteSqlServer')
  • table: Name of the table in database
  • imagefield: name of the image-field containing the image data
  • idfield: name of the field containing the primary key (must be integer-id!)
  • idvalue: value of id

Exposing connection strings (even just by name), database names, table names, ID field names, and ID field values may be a security concern in internet scenarios. It doesn't open up a direct attack vector but exposes more to the public than necessary.

Alternatively you can add the needed infos in your web.config in the appsettings section:

<add key ="BBDatabase" value ="Connectionstring=SiteSqlServer;table=MyImages;ImageField=ImageData;idField=ImageID" />

with this defined in web.config your link has much less information for attackers:

<img src="bbimagehandler.ashx?db=BBDatabase&idValue=3&height=150" /> 

Parameters:

  • db: key of appsetting entry in web.config (e.g. "BBDatabase")
  • idvalue: value of id

DNN Profile picture:

Profile picture of a DNN User:
<img src="bbimagehandler.ashx?dnn=1&userid=7&portalid=0&height=150" />

profilepic

Parameters:

  • dnn: Any value (e.g. dnn=1) [Changed in V 1.4.0]
  • userid: userid of the user whose profile picture should be shown
  • portalid: the portalid in which the user resides

Don't forget that you can combine the most parameters (not only for the profile pic option). So it is possible to pimp your profile pic as inverted with border and watermark

profilepic-inverted

Web Image

Image from another website
<img src="bbimagehandler.ashx?ImageUrl=http://www.bitboxx.net/Portals/0/Images/bitboxxsmall.gif&width=200 />

bitboxxlogo200

Parameters:

  • imageurl: Url of the image to be displayed

Webpage Thumbnail:

Url Thumbnail of Webpage:
<img src="bbimagehandler.ashx?Url=http:\\www.ebay.de&width=250&ratio=screen" />

image

Parameters:

  • url: Url of the Web page from which the thumbnail should be done
  • ratio:
    • full: Make a thumb of the full web page (Default)
    • screen: Make a thumb with dimensions 3:2 (cut of rest)
    • cinema: Make a thumb with dimensions 16:9 (cut of rest)

Counter

Using as counter:
<img src="bbimagehandler.ashx?File=Counter.gif&digits=8&counter=32477" />

image

Parameters:

  • File: Must be special counter image file with digits 0 to 9 with similar width per digit: image
  • digits: No of digits.
  • counter: Value to display

Percentage

Using as radial percentage indicator:
<img src="bbimagehandler.ashx?Percentage=40&backcolor=green" />

image

Parameters:

  • percentage: Percentage value
  • backcolor: Color of percentage indicator

Placeholder

Generates a placeholder image:
<img src="bbimagehandler.ashx?placeholder=1&width=150&height=100&color=green&backcolor=lightgreen" />

image

Parameters:

  • Placeholder: Any value (e.g. Placeholder=1)
  • Width: Width of resulting image (this or Height must be defined)
  • Height: Height of resulting image (this or Width must be defined)
  • Color: Color of text and border (Default: dark grey, optional)
  • BackColor: Backcolor of Image (Default:light grey, optional)
  • Text: Text to show on image. If not used, image dimensions will be shown

Barcode

Generates a barcode image:
<img src="bbimagehandler.ashx?barcode=1&width=150&height=150&type=qrcode&content=this%20is%20the%20barcode%20content" />

QR-Code

Parameters:

  • barcode: Any value (e.g. barcode=1)
  • type: upca, ean8, ean13, code39, code128, itf, codabar, plessey, msi, qrcode, pdf417, aztec, datamatrix
  • Width: Width of resulting barcode
  • Height: Height of resulting barcode
  • Border: Width of border (Specifies margin, in pixels, to use when generating the barcode. The meaning can vary by format; for example it controls margin before and after the barcode horizontally for most 1D formats.)
  • Content: The content of the barcode (numeric or alphanumeric,depends on barcode type)

(Barcode generation is made by open source library ZXing.NET)


Booking Schedule

Generates a 1 year booking schedule image:
<img src="bbimagehandler.ashx?schedule=year&culture=de-DE&matrix=11166111116611111661111166111116611111661111166111116611111000661111188333338833311661..." />

BookingSchedule

Parameters:

  • schedule: Any value (e.g. schedule=year)
  • backcolor: color of background (optional, default = white)
  • culture: Culture abbrev (e.g. "en-us"). Needed for displaying month names (optional, default is CurrentCulture)
  • Matrix: String of length 12 * 31 = 372 (0 = no valid date (eg. Feb. 30), 1 = free, 2 = reserved, 3 = occupied, 4 = selected. Add +5 if weekend)

Last edited Mar 26 at 9:39 PM by bitboxx, version 12