A couple of years ago (in the days of DNN 3.1), I wrote an image upload control that was patterned after the DNN core URL control but added such features as image preview, auto-resizing, thumbnailing, and basic editing commands such as flip and rotate 90 degrees. With the advent of ASP.NET 2.0 client callbacks and MS AJAX, I wanted to try building an image editing control which included cropping capabilities and which avoided most postbacks. The results of several months of work are demonstrated below showing the image editor (a custom server control inheriting from ScriptControl). The base ImageEditor control could be used in any ASP.Net 2.0 site. For this demo, it has been placed in a DNN module which handles the image file selection and upload as well as demonstrates some of the editor's options, particularly those for constraining the crop area.
Work is now completed for a first release on a more comprehensive ImageEditorControl which wraps the base ImageEditor in a DNN-aware composite server control that provides image upload capability and ties to all of the DNN folder and file handling including the use of secure and/or database folder storage. If you are a registered site user, you will see below a demonstration of the ImageEditorControl in a DNN module. This control also permits switching modes between view and edit, includes auto-resizing and auto-thumbnailing, and several options for setting JPG and GIF quality enhancements for stored images.
The base ImageEditor, the DNN-aware ImageEditorControl, and both the demo and upload and edit modules are now available for download on my Downloads page. Full source code for the Image Editor and ImageEditorControls are provided in the two source packages.
A Forge/CodePlex project will soon be set up on the DotNetNuke.com website for anyone wanting to contribute to the further development of this control. How about building a custom profile property editor control?
Here are a few of the features and instructions for the cropping operation:
- Begin a cropping operation by making a left mouse click anywhere in the preview area then dragging to form a crop selection area. Release the left mouse button when the selection area is roughly the size/shape your would like.
- To resize the selection area, left click over one of the corner or mid-side handles and drag it in the direction desired.
- To move the selection area, left click within its bounds and drag the entire selection area as desired.
- To start a new selection area, left click outside of the current selection area.
- To accept the selection area and perform the crop, double click within the bounds of the current selection area.
- Several keyboard commands may be used: ESC cancels the current selection area; arrow keys move the entire selection area 1 pixel in the chosen direction; shift-arrow moves the entire selection area 10 pixels in the chosen direction; depressing SHIFT key while dragging a re-sizing handle forces the selection area to become square and depressing CTRL key while dragging a re-sizing handle forces the selection area to maintain its current shape.
Try some of the options to the right of the editor. Click the "Apply Selected Constraints/Options" button after making one or more changes in cropping constraints or options. Minimum and/or maximum crop area width and height, aspect ratio, and whether or not the selection area is displayed when the control is first initialized may be specified. If identical widths and/or heights are specified for both the minimum and maximum crop area, the crop area will become fixed in either width or height or both but can still be positioned as a whole. This is particularly useful if an uploaded image ust be cropped to a fixed size.
Most of the other options such as persistence of the image bitmap either in memory or file cache, use of a web service (rather than the default use of client callbacks to process image modifications), toolbar orientation and preview image size are for demonstration/testing purposes and in the final version are likely to be options set declaritively or on first load rather than changed by the end user. Ask me sometime about the difficulties of persisting these options accross both callbacks and async postbacks both client and server side! To help me test the performace of memory vs file cacheing and callbacks vs web service image processing, the total time to perform an edit operation is shown in the status bar. This feature will be removed in the final version.
I would welcome your comments and suggestions as to the further development of this control. You are welcome to e-mail them to me at bill@wesnetdesigns.com.
If you would like to contribute to the development of this control, I have set it up as a CodePlex project at http://www.codeplex.com/imageeditor. Contact me at the above e-mail to request contributor access to the project.
Many interesting techniques were used in the development of this control: MS AJAX, particularly for a full-fledged server control inheriting from ScriptControlBase, ASP.NET 2.0 client callbacks, extensive client-side JavaScript including dynamic creation/positioning of DOM elements and event handling involved in the cropping operation, dynamic image resizing and streaming by way of a generic HttpHandler (ashx), an optional web service (asmx) for image processing, persistence of the image bitmap by either memory or file cacheing, persistence of editor options across a combination of callbacks and async postbacks (ultimately using custom ClientState loading/saving to and from a hashtable that is then JSON serialized/deserialized), and probably the hardest of all - some cross-browser scripting and CSS. If I see another browser "quirk" I think I'll scream!
Visit our Downloads page (registration required) for both install and source versions of the Image Editor Control and a demo DNN module for image upload and editing.