Polaroid image processing with GDI+ in ASP.NET.
I stumbled upon a Dutch website that would take an URL of an image and then
return a manipulated image with the looks of a polaroid picture. I was
impressed by its simplicity and yet its effective functionality and wondered:
"how did they do that?". There are no explanations on how they did it or even anything else other
than the image URL textfield. I also could not find anything similar anywhere on the Internet. This
was enough to get my curiosity going.
Anyways, I had done some graphics manipulation with C# for Windows
applications, so I wondered what it would take to do this for web applications?
In other words, it would require retrieving and loading the image provided in
the textbox into memory, convert the text provided in the textbox into a
graphic, load a background image into memory and then putting it all together. Finally,
rotate the finished image in memory and return to the browser as a binary stream. All
this on the fly... Hmmm... let's see....I think it can be done.
What I thought would be a quick one hour project turned a bit longer than expected, but here
is my result with 100% ASP.NET.
Just type or copy the URL of an image (.jpg only) into the first field, any text into the
second field and press the Polaroid! button. If you don't have an image URL or don't know what it is, click the Fill button
below
to fill the textfields with sample data and then click the Polaroid!
button.
URL
Text
Please be patient, it may take a second or two...
| Original image |
Polaroid image |
![]()
|
![]()
|
| (Images scaled to fit. Click image for full size... |
aspx.cs code
private void GeneratePolaroid() {
picURL = Page.Request.QueryString["TextBox_URL"].ToString();
textText = Page.Request.QueryString["TextBox_text"].ToString();
bMatrix.Rotate(param_Rotation);
bitMap_text = new Bitmap(textWidth,
textHeight,
PixelFormat.Format32bppArgb);
Graphics g = Graphics.FromImage(bitMap_text);
g.SmoothingMode = SmoothingMode.AntiAlias;
Rectangle rect = new Rectangle(0, 0, textWidth, textHeight);
brush = new SolidBrush(Color.White);
g.FillRectangle(brush, rect);
StringFormat format = new StringFormat();
format.Alignment = StringAlignment.Center;
format.LineAlignment = StringAlignment.Near;
GraphicsPath path = new GraphicsPath();
path.AddString(textText,
font.FontFamily,
(int)font.Style,
font.Size,
rect,
format);
brush = new SolidBrush(Color.Black);
g.FillPath(brush, path);
MemoryStream TextMemoryStream = new MemoryStream();
bitMap_text.Save(TextMemoryStream, Imaging.ImageFormat.Jpeg);
//----------------------------------------
Image backGround = Image.FromFile(
Server.MapPath(@"...\background.gif"));
ImageCodecInfo [] encoders = ImageCodecInfo.GetImageEncoders();
EncoderParameters encoderParameters = new EncoderParameters(1);
encoderParameters.Param[0] = new EncoderParameter(
Encoder.Quality, param_Quality);
foreach(Drawing.Imaging.ImageCodecInfo encoder in encoders) {
if(encoder.MimeType == "image/jpeg") {
bitMap_border = new Bitmap(backGround,
backGround.Width,
backGround.Height);
bitMap_image = new Bitmap(
new MemoryStream(GetImageBinary(picURL)));
bitMap_text = (Bitmap) Drawing.Image.FromStream(
TextMemoryStream);
Graphics g2 = Graphics.FromImage(bitMap_border);
g2.SmoothingMode = SmoothingMode.HighQuality;
g2.Transform = bMatrix;
g2.DrawImage(bitMap_image, 15, 095, 217, 205);
g2.DrawImage(bitMap_text, 10, 307);
Page.Response.ContentType = "image/jpeg";
bitMap_border.Save(Response.OutputStream,
encoder, encoderParameters);
g2.Dispose();
break;
}
}
bitMap_image.Dispose();
bitMap_text.Dispose();
bitMap_border.Dispose();
font.Dispose();
brush.Dispose();
g.Dispose();
}
private byte[] GetImageBinary(string url){
HttpWebRequest wr = (HttpWebRequest)WebRequest.Create(url);
HttpWebResponse wresponse = (HttpWebResponse)wr.GetResponse();
Stream responseStream = wresponse.GetResponseStream();
BinaryReader br = new BinaryReader(responseStream);
long bytesize = wresponse.ContentLength;
return br.ReadBytes((int)bytesize);
}