Introduction
The following code example will show you how to generate a basic image with WPF and render it to a webpage. It will cover the major issues encountered during the development of this solution.
Background
During a project I worked on, we needed to generate an image that contained live data so that when we emailed our client base, an image was rendered from a snap shot of data within our database. This image was embedded into an email so that even if you opened it up a day late it would be live, relevant and data specific to the person reading it. The great thing about this solution is that you could even code your image to generate according to the time the email was open, so if your client opens it a week late you could offer him the current offers or specials.
Using the code
Bellow is a basic aspx web page that will host the binary output of the WPF application. You will need to create an STA thread so as to comunicate with the WPF project.
public partial class _Default : System.Web.UI.Page
{
private Byte[] _bufferMain;
public Byte[] BufferMain
{
get { return _bufferMain; }
set { _bufferMain = value; }
}
public void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
DisplayDialog();
Response.Clear();
Response.ContentType = @"image/jpeg";
Response.BufferOutput = true;
Response.BinaryWrite(BufferMain);
Response.Flush();
}
}
[STAThread]
public void DisplayDialog()
{
try
{
Thread worker = new Thread(new ThreadStart(DisplayDialogInternal));
worker.SetApartmentState(ApartmentState.STA);
worker.Name = "DisplayDialog";
worker.Start();
worker.Join();
}
catch (Exception exp)
{
Response.Write(exp.ToString());
}
}
public void DisplayDialogInternal()
{
try
{
string fileName = @"C:\TestWeb.jpg";
RenderBookingGridImage image = new RenderBookingGridImage();
BufferMain = image.RenderImage("TESTVALUE");
Stream st = new MemoryStream(BufferMain);
JpegBitmapDecoder jpeg = new JpegBitmapDecoder(st, BitmapCreateOptions.PreservePixelFormat, BitmapCacheOption.None);
using (Stream stm = File.Create(fileName))
{
JpegBitmapEncoder encoder = new JpegBitmapEncoder();
encoder.Frames.Add(jpeg.Frames[0]);
encoder.Save(stm);
}
}
catch (Exception exp)
{
}
}
}
The image will be generated via a WPF class but there are some really important issues that I encountered during this development proccess. When using canvas controls, you must Measure and Arrange the canvas before using it to render the image. If you do not do this you might get a blank canvas.
Bellow is the code need to render a image in the WPF project.
public Byte[] RenderImage(string passedInVar)
{
TextBlock tb = new TextBlock();
tb.Width = (double)400;
tb.Height = (double)200;
tb.TextAlignment = TextAlignment.Center;
tb.Text = "Text added via code...";
tb.FontSize = (Double)30;
tb.Foreground = Brushes.Blue;
InnerCanvas.Children.Add(tb);
InnerCanvas.UpdateLayout();
Canvas canvas = (Canvas)this.FindName("InnerCanvas");
canvas.Measure(new Size((int)canvas.Width, (int)canvas.Height));
canvas.Arrange(new Rect(new Size((int)canvas.Width, (int)canvas.Height)));
int Height = ((int)(InnerCanvas.ActualHeight));
int Width = ((int)(InnerCanvas.ActualWidth));
RenderTargetBitmap rtb = new RenderTargetBitmap(Width, Height, 96, 96, PixelFormats.Pbgra32);
rtb.Render(InnerCanvas);
JpegBitmapEncoder jpg = new JpegBitmapEncoder();
jpg.Frames.Add(BitmapFrame.Create(rtb));
Byte[] tmpArry;
using (MemoryStream ms = new MemoryStream())
{
jpg.Save(ms);
tmpArry = ms.ToArray();
}
if (jpg.Dispatcher.Thread.IsAlive)
{
jpg.Dispatcher.InvokeShutdown();
}
if (rtb.Dispatcher.Thread.IsAlive)
{
rtb.Dispatcher.InvokeShutdown();
}
jpg = null;
rtb = null;
return tmpArry;
}
Points of Interest
Threading in WPF created real havoc on our servers for some reason because, if you call a WPF application in a non-conventional way, it leaves running threads on the server. So be very careful when opening certain controls.
Make sure that the following is called when using any object that uses dispatchers.
.Dispatcher.InvokeShutdown()