www.webdeveloper.com
Results 1 to 7 of 7

Thread: Output Dynamically Resized Image from Data Stream...

  1. #1
    Join Date
    Apr 2004
    Posts
    27

    Output Dynamically Resized Image from Data Stream...

    I am converting from classic ASP to .NET via VB.NET and sorta stuck on outputting streamed images from a dynamically resizing routine courtesy of [4guysfromrolla]. I would definitely appreciate any expert input in my times of transition. Graci.

    http://aspnet.4guysfromrolla.com/articles/012203-1.aspx

    The ultimate goal is to GetFiles from a directory, parse each image and stream it as output into

    <td> <img onClick= > </td>

    with capabilities of JPEG & GIF...

  2. #2
    Join Date
    Nov 2003
    Posts
    655
    Use an aspx page for the image links. Have the aspx page do any processing needed on the image and pass out the content. Semi-relevant example to follow in my next post.

    EDIT: After now having followed the link you provided, I have to ask... What exactly are you having problems with? Specific questions lead to more specific answers...
    Last edited by CardboardHammer; 05-03-2004 at 11:26 AM.

  3. #3
    Join Date
    Nov 2003
    Posts
    655
    Complete codebehind for a page that I use to generate piechart graphics.

    Code:
    Imports System.Drawing
    Imports System.Drawing.Imaging
    
    Public Class PieChart
    	Inherits System.Web.UI.Page
    
    #Region " Web Form Designer Generated Code "
    
    	'This call is required by the Web Form Designer.
    	<System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent()
    
    	End Sub
    
    	Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init
    		'CODEGEN: This method call is required by the Web Form Designer
    		'Do not modify it using the code editor.
    		InitializeComponent()
    	End Sub
    
    #End Region
    
    	Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
    		'Output error image on bad data... everything else, revert to defaults on error
    		Dim arrValues As Array
    		Dim arrVals() As Single
    		Dim sSum As Single
    		Dim arrColors() As Color
    		Dim numColors As Int32
    
    		Dim strFormat As String
    		Dim lSize As Int32
    		Dim sCurrentDegree As Single
    		Dim iLoop As Int32
    		Dim iEndLoop As Int32
    		Dim objBkgrColor As Color
    		objBkgrColor = Color.White	   'Default
    
    		Dim coll As Collections.Specialized.NameValueCollection
    		coll = Request.QueryString
    
    		arrValues = coll.GetValues("f")
    		If Not arrValues Is Nothing Then
    			Try
    				strFormat = Convert.ToString(arrValues.GetValue(0))
    			Catch			 'Ignore any error
    			End Try
    		End If
    
    		arrValues = coll.GetValues("s")
    		If Not arrValues Is Nothing Then
    			Try
    				lSize = Convert.ToInt32(arrValues.GetValue(0))
    				If lSize <= 0 Then
    					'Default size
    					lSize = 200
    				ElseIf lSize > 800 Then
    					'Maximum size
    					lSize = 800
    				End If
    			Catch			 'Use Default size
    				lSize = 200
    			End Try
    		Else
    			'Use Default size
    			lSize = 200
    		End If
    
    		arrValues = coll.GetValues("a")
    		If Not arrValues Is Nothing Then
    			Try
    				sCurrentDegree = Convert.ToSingle(arrValues.GetValue(0))
    			Catch			 'Ignore any error
    			End Try
    		End If
    
    		arrValues = coll.GetValues("c")
    		If Not arrValues Is Nothing Then
    			iEndLoop = arrValues.GetUpperBound(0)
    			Try
    				Dim arrTempColors(iEndLoop) As Color
    
    				For iLoop = 0 To iEndLoop
    					arrTempColors(iLoop) = Color.FromArgb(Convert.ToInt32(arrValues.GetValue(iLoop)))
    				Next
    				arrColors = arrTempColors
    			Catch			 'IRevert to default colors on error
    				'Get default colors
    				Procedures.GetDefaultColors(arrColors)
    			End Try
    		Else
    			'Get default colors
    			Procedures.GetDefaultColors(arrColors)
    		End If
    
    		numColors = arrColors.GetLength(0)
    
    		arrValues = coll.GetValues("b")
    		If Not arrValues Is Nothing Then
    			Try
    				objBkgrColor = Color.FromArgb(Convert.ToInt32(arrValues.GetValue(0)))
    			Catch			 'Ignore any error
    			End Try
    		End If
    
    		Dim sTemp As Single
    		arrValues = coll.GetValues("d")
    		If Not arrValues Is Nothing Then
    			Try
    				iEndLoop = arrValues.GetUpperBound(0)
    				Dim arrValsTemp(iEndLoop) As Single
    				For iLoop = 0 To iEndLoop
    					sTemp = Convert.ToSingle(arrValues.GetValue(iLoop))
    					If sTemp < 0 Then
    						iEndLoop = -1
    					End If
    					arrValsTemp(iLoop) = sTemp
    					sSum += arrValsTemp(iLoop)
    				Next
    				arrVals = arrValsTemp
    			Catch			 'ignore all errors...?
    				iEndLoop = -1
    			End Try
    		Else
    			iEndLoop = -1
    		End If
    
    		arrValues = coll.GetValues("r")
    		If Not arrValues Is Nothing Then
    			Try
    				If Convert.ToString(arrValues.GetValue(0)) = "-" Then
    					sSum *= -1				'counterclockwise rotation
    				End If
    			Catch			 'Ignore any error
    			End Try
    		End If
    
    		' Create a Bitmap instance and a Graphics instance   
    		Dim objBitmap As Bitmap
    		objBitmap = New Bitmap(lSize, lSize, PixelFormat.Format32bppArgb)
    		Dim objGraphics As Graphics
    		objGraphics = Graphics.FromImage(objBitmap)
    
    		'Put a white background in
    		objGraphics.FillRectangle(New SolidBrush(objBkgrColor), 0, 0, lSize, lSize)
    
    		For iLoop = 0 To iEndLoop
    			'use twice, calculate once
    			sTemp = 360 * arrVals(iLoop) / sSum
    			'Draw the slice
    			objGraphics.FillPie(New SolidBrush(arrColors(iLoop Mod numColors)), 0, 0, lSize, lSize, sCurrentDegree, sTemp)
    			' increment the currentDegree
    			sCurrentDegree += sTemp
    		Next
    
    		' Save the image to the OutputStream
    		If strFormat = "jpeg" Then
    			Response.ClearContent()
    			Response.ContentType = "image/jpeg"
    			objBitmap.Save(Response.OutputStream, ImageFormat.Jpeg)
    			Response.Flush()
    		Else
    			Response.ClearContent()
    			Response.ContentType = "image/gif"
    			objBitmap.Save(Response.OutputStream, ImageFormat.Gif)
    			Response.Flush()
    		End If
    
    		' clean up...
    		objGraphics.Dispose()
    		objBitmap.Dispose()
    	End Sub
    
    End Class
    Image tag using the above page.
    Code:
    <IMG SRC="PieChart.aspx?a=-90&s=100&d=27&d=10&d=8&d=7&d=5&d=1&d=0&d=1&d=0&d=0&d=0&d=1&d=0&d=0&d=0&d=0&d=0&d=0">

  4. #4
    Join Date
    Apr 2004
    Posts
    27

    In-depth...

    I understand the logic of the algorithm to dynamically resize the image up to the point of outputting the information back to the client. How do I know exactly what is being thrown back from the data stream once the image has been resized? The reason why this is so important for me is that I have to fit this algorithm in a For Each Next Loop that would take an image in a given folder, thumbnailize it, then output <td> <img src... onClick()...> </td>. The onClick() is for opening a new window with the full-sized image originally in javascript but if anyone knows how to completely turn this into a server solution, THAT WOULD BE AWESOME. I'm guessing the starting point would be to use an ASP Image Control then place the appropriate event handler to trigger opening of the new window... then adding on to the complexity... this new window should be dynamic in accordance with user's resolution and centered. Is this possible with a complete ASP.NET solution? Then again I've tried Response.Write ASP Controls and that doesn't seem to work because of code stack issues... insights?

  5. #5
    Join Date
    Nov 2003
    Posts
    655
    The src attribute for the image tag is the URL of page that does the resizing along with a querystring containing parameters for the image being shrunk, the size being shrunk to, image format, etc. If you want 10 thumbnails on a page, you're going to have 10 image tags and then 10 requests for the resizing page from the browser when the browser processes the image tags. You don't resize all 10 images at the same time as you're generating the rest of the page and then send everything the client in one shot; that's just not the way it works.

    "what is being thrown back from the data stream once the image has been resized" is the equivalent (as far as the client browser is concerned) of what the client would get if you resized the image manually and then setting the src attribute of the image tag to the URL of the resized image.

    Before saving image data to Response.OutputStream, you can use Response.ClearContent() to get rid of any crap that may have already been tossed in, then set the content type appropriately, and then save.

  6. #6
    Join Date
    Apr 2004
    Posts
    27

    For Next Loop?

    Right on... but instead of having separate image tags it can be done with a For Next Loop? If so how would this work in example? I'm quite the visual learner so looking examples is my best way of learning.

  7. #7
    Join Date
    Nov 2003
    Posts
    655
    You could combine all the thumbnails into one image, but then you'd need to treat that image as an imagemap (or whatever the heck it's called) in order to open the correct full-size image when handling the onclick event.

    To handle the images, you'd shrink each one of them to thumbnail size and paste them into the correct place in the image to be output. It could be done in a loop: shrink an image in the list/array of images and paste into place in the final image in each iteration of the loop.

    I've never done an image map, so you'll need to find another resource for dealing with that.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles