ImageDraw ASP.NET Photo Callout Editor Sample with Yahoo UI Library (YUI)
Product ImageDraw for ASP.NET Published 02/18/2010 Updated 02/18/2010
Requirements
Neodynamic ImageDraw (5.0 or later) for ASP.NET
Microsoft .NET Framework (3.5 or later)
Microsoft Visual Studio 2008 or later / Visual Web Developer 2008 Express Edition or later
Yahoo UI 2.0
This ImageDraw demo - which source code files can be found at the end of this page available for downloading - demonstrates how you can use ImageDraw and Yahoo UI Library (YUI) to design a Photo Callout (a.k.a. Speech Bubble) editor in ASP.NET websites.
The following figure is a screenshot of the ASP.NET Photo Callout Editor.
The ASP.NET Photo Callout Editor Sample
This sample lets users to upload a photo and then add a callout or speech bubble which can be dragged and resized on the image for positioning. Thanks to Yahoo UI library it is possible to provide handlers for the callout parts which include an arrow tip as well as the size of the bubble. ImageDraw is responsible of generating the callout shape from the server side while the user interacts with the editor. Callout shapes are rich featured in ImageDraw and in this sample is demonstrated how to fill the callout shape with gradient colors; the callout shape type be it an oval or rounded rectangle and the text to be drawn supporting multiline and RTL languages. Finally, the user can download the output image generated by ImageDraw which will compose it with the original photo plus the callout shape.
Sample Files Download
Here are the VB.NET and C# versions of this sample. Please download the zip file and extract it. After that, you'll find all necessary files to reproduce this demo.
For ImageDraw 5.0 for ASP.NET
- For Visual Basic.NET: ImageDraw50PhotoCalloutVB.zip (392 KB)
- For Visual C#.NET: ImageDraw50PhotoCalloutCS.zip (392 KB)
Remember to download and install ImageDraw for ASP.NET in order to reproduce this sample demo.