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

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.
 
G

Guest

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
 
M

Mark S.

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.
 
G

Guest

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
 
M

Mark S.

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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top