This project has moved. For the latest updates, please go here.

Image processing

By default, the image are automatically downloaded and inserted inside the word document.
You can also provide your own mechanism to retrieve the image or provide credentials to read the data.

Image Format

Inline (base 64)

The library support the data URI format as specified by the IETF.
More detailed information available on wikipedia.

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

Automatic Download

The automatic download uses a classic System.Net.WebClient in anonymous mode.
Since v1.4, you can specify your credentials and/or the proxy or still handling the ProvisionImage event.

converter.WebProxy.Credentials = new NetworkCredential("john", "123456", "codeplex");
converter.WebProxy.Proxy = new System.Net.WebProxy("http://proxy-isa:8080");

Manually download image

HtmlToOpenXml automatically download the image. However, you can either ignore any <img> tag or manually read the image from a data cache or provide some credentials to grab them.
You can set the property that control this behavior like this:

converter.ImageProcessing = ImageProcessing.ManualProvisioning;
converter.ProvisionImage += converter_ProvisionImage;


private void converter_ProvisionImage(object sender, ProvisionImageEventArgs e)
       // Read the image from the file system:
        e.Data = File.ReadAllBytes(@"c:\inetpub\wwwroot\mysite\images\" + e.ImageUrl);

You can set manually the image size or leave empty (0,0) to let the converter detects the image size.

e.ImageSize = new System.Drawing.Size(50, 50);

Resolve relative image link

If you let the default image processing to "AutomaticDownload", the converter will not be able to resolve url like : "/_layouts/images/pic.gif".
These images will be ignored unless you set the property:

converter.BaseImageUrl = new Uri("http://myserver:8080/");

It's possible to work with local images

converter.BaseImageUrl = new Uri("C:\inetpub\wwwroot\static-assets\");

Specify the dimension of an image

The converter take care of the width and height attributes on the <img> tag.
The size should be in pixels (px).

If no dimension is specified, the image size is automatically detected through HtmlToOpenXml.ImageHeader.GetDimensions().
This class give you the image size without reading the entire file. This code was found on stackoverflow forum

If only one of the two attributes is specified, the image is resized regarding the aspect ratio.

Border support

The border, border-style, border-width and border-color style attributes are interpreted.
border-style could take these values: dotted, dashed, solid, double, inset, outset or none.
border-width only support px units or these reserved keywords: medium, thick or thin.


You can add a legend above or below an image.


The synthax is similarly to the <figcaption> tag included in Html5:
  <img src="img_pulpit.jpg" width="304" height="228" />
  <figcaption>A view of the pulpit rock in Norway</figcaption>

or inverse the line <figcaption> and <img> to display the legend above.

Last edited Apr 18, 2014 at 12:14 PM by onizet, version 12