how to convert text to image on the fly without image file

Question

I am doing some sort of directory in ASP.NET, in which everyone has phone numbers displayed. I dont want harvesting on my site, so instead of writing 123-123-1234 I want it to be rendered from image.

another limitation is that I dont want to save any TMP image file. I want the server to send it right back to the client for redrawing. Is that something doable? via JS?

Thanks!

See (for an example): http://stackoverflow.com/questions/887985/create-png-image-with-c-sharp-httphandler-webservice — Jim H., Nov 23 '11 at 20:50
You want the server to send text that the client turns into an image? — Paul, Nov 23 '11 at 20:50
No. I want the communication between them is via image only. but i dont want the server to create an image — Himberjack, Nov 23 '11 at 20:51

score 1 · Accepted Answer · answered Nov 23 '11 at 20:58

I wouldn't do this with JavaScript. If they can scrape your page they can scrape your JavaScript code that says var phone = '123-123-1234';. But there are no shortages of examples on how to do this on the web. Most examples write the image directly to the client without creating an intermediary file.

gilly3 · Answer 2 · 2011-11-23T21:53:16.277

Create a generic handler that streams back an image. Pass it an identifier that allows you to look up the phone number from your database. You would call Graphics.DrawString(phoneNumber, ...) on the graphics from a new Bitmap and save it to the Response.OutputStream.

Something like this:

public class PhoneNumber : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        var id = context.Request["id"];
        var phoneNumber = "";
        if (!string.IsNullOrEmpty(id))
        {
            phoneNumber = DataAccessor.GetPhoneNumber(id);
        }
        context.Response.ContentType = "image/png";
        var bmp = new Bitmap(100, 20);
        var gfx = Graphics.FromImage(bmp);
        gfx.FillRectangle(Brushes.White, 0, 0, 100, 20);
        gfx.DrawString(phoneNumber, new Font("Arial", 10), Brushes.Black, 0, 0);
        bmp.Save(context.Response.OutputStream, ImageFormat.Png);
    }
    public bool IsReusable { get { return false; } }
}

Call it like:

<img src="PhoneNumber.ashx?id=<%# Eval("PhoneNumberId") %>" />

I was just writing the same answer, but you eplained it realy nice :) — Goran, Nov 23 '11 at 21:33

how to convert text to image on the fly without image file

2 Answers2