How do I make, store in memory and return spacer image in C#2.0/aspx?

  • Thread starter Thread starter Mark S.
  • Start date Start date
M

Mark S.

Hello,

On a high volume page we have the following JavaScript:
img = new Image()
img.src = 'http://myserver.com/count.aspx?x=1';

and it works fine, but now we've added:
img.onload = myImgLoaded

and it fails on IE and FF. The reason being it's not returning a proper
image, simply text. When a gif/jpg is returned it fires the onload event
every time.

Below I've sketched out how I might get the aspx page to return as an image,
but I would greatly appreciate help flushing it out.

void Application_Start(object sender, EventArgs e)
{
// i think i have to start with a bmp, not sure how to get it to gif or jpg
Bitmap bitmapSpacer = new Bitmap(1, 1);
}

private void Page_Load(object sender, System.EventArgs e)
{
// set the header
Response.ContentType = "image/gif";

// misc biz logic here

// return the image
// keep in mind I don't want to create this image each page loads nor load
it from the hard drive nor create a img tag
Response.Write(bitmapSpacer); // Can it can be returned this way?
}

Thank you.
 
Assign onload event before you assign src.

var img = new Image();
img.onload = myImageLoad;
img.src = 'http://myserver.com/count.aspx?x=1';

It always happens when image is cached on the client machine and because of
this it's loaded before event handler is known.

Hope this helps
 
Milosz;

Thank you, but I wasn't looking for feedback on the Javascript. For the
record, the code doesn't have to live in an onload, to avoid caching we use
img.src = 'http://myserver.com/count.aspx?x=1&cacheBuseter='+Math.random();

The Javascript works just fine, there's no problem firing the img onload
event IF an image is returned.

Thanks anyways, and to the rest of the group, please consider this question
still open for feedback.
 
Sorry, i was misled by 'we added onload and it stoped working'. I created an
example that should fixed the problem.

1. page generating the counter gif:

using System;
using System.Web;
using System.Drawing;

public partial class Counter : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
const int DefaultCounterValue = 0;
int counter;

if (!int.TryParse(Request.QueryString["x"], out counter))
counter = DefaultCounterValue;


System.Drawing.Image image = GenerateCounterImage(counter);
image.Save(Response.OutputStream, System.Drawing.Imaging.ImageFormat.Gif);

Response.ContentType = "image/gif";
Response.End();

}

private System.Drawing.Image GenerateCounterImage(int counter)
{
const int Width = 100;
const int Height = 30;

Bitmap image = new Bitmap(Width, Height);
Graphics graphics = Graphics.FromImage(image);
Font font = new Font("Arial", 10.0f);

graphics.FillRectangle(Brushes.Yellow, 0, 0, Width, Height);
graphics.DrawString(counter.ToString(), font, Brushes.Red, new PointF(1,
1));
graphics.Dispose();
font.Dispose();

return image;
}
}


and test html on another page:

<script language="javascript">
var g_img = new Image();
g_img.onload = myImageLoad;
g_img.src = 'counter.aspx?x=1';

function myImageLoad()
{
var counterImage = document.getElementById('<%=counterImage.ClientID %>');
counterImage.src = g_img.src;
}
</script>

<img runat="server" id="counterImage" alt="loading..."/>
hope this helps
 
Thank you, your code showed me the way to succesfully returning the gif.



Milosz Skalecki said:
Sorry, i was misled by 'we added onload and it stoped working'. I created
an
example that should fixed the problem.

1. page generating the counter gif:

using System;
using System.Web;
using System.Drawing;

public partial class Counter : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
const int DefaultCounterValue = 0;
int counter;

if (!int.TryParse(Request.QueryString["x"], out counter))
counter = DefaultCounterValue;


System.Drawing.Image image = GenerateCounterImage(counter);
image.Save(Response.OutputStream, System.Drawing.Imaging.ImageFormat.Gif);

Response.ContentType = "image/gif";
Response.End();

}

private System.Drawing.Image GenerateCounterImage(int counter)
{
const int Width = 100;
const int Height = 30;

Bitmap image = new Bitmap(Width, Height);
Graphics graphics = Graphics.FromImage(image);
Font font = new Font("Arial", 10.0f);

graphics.FillRectangle(Brushes.Yellow, 0, 0, Width, Height);
graphics.DrawString(counter.ToString(), font, Brushes.Red, new PointF(1,
1));
graphics.Dispose();
font.Dispose();

return image;
}
}


and test html on another page:

<script language="javascript">
var g_img = new Image();
g_img.onload = myImageLoad;
g_img.src = 'counter.aspx?x=1';

function myImageLoad()
{
var counterImage = document.getElementById('<%=counterImage.ClientID %>');
counterImage.src = g_img.src;
}
</script>

<img runat="server" id="counterImage" alt="loading..."/>
hope this helps
--
Milosz Skalecki
MCP, MCAD


Mark S. said:
Milosz;

Thank you, but I wasn't looking for feedback on the Javascript. For the
record, the code doesn't have to live in an onload, to avoid caching we
use
img.src =
'http://myserver.com/count.aspx?x=1&cacheBuseter='+Math.random();

The Javascript works just fine, there's no problem firing the img onload
event IF an image is returned.

Thanks anyways, and to the rest of the group, please consider this
question
still open for feedback.
Click to expand...
Click to expand...
 
Back
Top