Images in html export.

Tormod

Is there a way to make sure that images rendered using the Dump() method are rendered properly in the html export?
For instance indicating a relative folder when executing LPRun where LPRun will store the images and these will be linked properly using relative paths in the resulting html?

To make sure the export is portable.

nescafe

Here is one ugly way to achieve this (working images in exported result html).

Method:
- Convert image to base64 encoded string
- Display image using data:image URI

var client = new WebClient();
var url = "http://www.gravatar.com/avatar/3b9fef24c50be8b7a6c8e7d0bae12485/?default=http%3A%2F%2Fvanillicon.com%2F3b9fef24c50be8b7a6c8e7d0bae12485_50.png&rating=g&size=50";
Util.Image("data:image/png;base64," + Convert.ToBase64String(client.DownloadData(url))).Dump();

Tormod

In my case the System.Drawing,Image object is returned from a library. But I can feed it into Util.Image() no problem.
However, what does that achieve? The resulting html file still has an absolute path to "C:\Users\\AppData\Local\Temp\LINQPad5\something\something". If I want to copy the html file to another place, I can't take the image with it. For all I know, the image may already have been cleaned up and deleted.

In short: this doesn't create a portable html file when exported:

void Main()
{
	var img = Image.FromFile(@"C:\temp\someimage.gif");
	Util.Image(img.imageToByteArray()).Dump();
}

// Define other methods and classes here
static class Helpers
{
    public static byte[] imageToByteArray(this System.Drawing.Image image)
	{
		using (var ms = new MemoryStream())
		{
			image.Save(ms, image.RawFormat);
			return ms.ToArray();
		}
	}
	
}

nescafe

Change this:

Util.Image(img.imageToByteArray()).Dump();

Into this:

Util.Image("data:image/gif;base64," + Convert.ToBase64String(img.imageToByteArray())).Dump();

And the image will be embedded in the html.

JoeAlbahari

nescafe is using the overload of Util.Image that takes a URI rather than a byte array, so there is no associated image file.

Tormod

Oh, I see. I didn't realize that this was possible. Don't know html that well. That works. Thank you very much!
I was looking for a way to designate a resources folder where those images would end up. But this is even better.

nescafe

Using the newly introduced ToDump() extensions:

void Main()
{
  // Write code to test your extensions here. Press F5 to compile and run.
}

public static class MyExtensions
{
  // Write custom extension methods here. They will be available to all queries.
}

// You can also define non-static classes, enums, etc.

public static object ToDump(object input)
{
  var image = input as System.Drawing.Image;
  if (image != null)
  {
    using (var ms = new MemoryStream())
    {
      image.Save(ms, image.RawFormat);
      return Util.Image("data:image;base64," + Convert.ToBase64String(ms.ToArray()));
    }
  }
  return input;
}

You can simply dump the Image object:

var img = System.Drawing.Image.FromFile(@"C:\Windows\AppCompat\UA\GenericApp.png");
img.Dump();

Which results in the following HTML:

<img src="data:image;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwwAADsMBx2+oZAAABD1JREFUWEftl9tTW1UUxjN98MXpq/+AM/4VvmNttZZyaaHXlFapM3QqBQGBkkDuAZoGqJTQEC4hEALFarVYX2sh9aFP+lTf8AXI7eTkCp9rnZPLKZ6Ui0580D3zzT7svdnfb629zsk5mv/bv94sdkenrs+McqrPaNOR9VukIxqTxbbz26t1vPz1d9Krf1SftTtUe4Yg83ckCLN1QPx5NYi/o9W1F1gL/oK1F7JW6fo5jbHU1ucA3iW9raF0iLF4AulUEqlk4hCS/y+pot1r2UNMZfIA75GOEoBV5MFy6i8AmWxWmlhZeYanP73cl1Z+fIZsJi0pGAyqKh/5+9cnJPG1KkA2B8AbV3UtoLrbj5qeedTq53DG4MNZkw/1Ni/q+2dw3jGFC85Jae0f6+tIJeIFo1I6EMBl8zK01ofQ2pbQMLCIq44ArjkX8OnIPBpH53Dd5cPn7lkFgKAaPWtfAPzHtgKgyfkdmoa/xY17j3DzPsm1jGb3Q9zyLKFlehGt3gDa5vwFgDQB8MbJpCj3CblXis0reoela1UAQZQneNO28SfocP+ADs/36Jx+jC/I/Ibbj8ZxL66MuaF1jaNhwlUEEOOq0bPyAGx+6p6tNEBUEAsAeu9T3J55goYhH06ax/CBcQgfWu/iRL8DH90ZxElnP06N2BQAuQxQ5NLtx/2uLLB5/UzP/gCaH3yDE4ZRVPQN45jZieM2Mh+4g4/vDuCTYbu02en7FgVATDV6Vh6AzRsfN5UGiCkAKvQjctQWMi9ETeYjdlR+bcXpMTOqHxiLAFQDSXoYJego8oa7xeZvBogXAY6ZcinnqB1kPkQpp6grRy2ocplQ4zbgjKe3AJCiI1CLnnUAAHmCNz1up6gHFSnnqCnl1eMm1E704eykHnWU0gJAXDjQY3xPAGWhVY5aUUUpr6GU13rIfEpH53kb531dRQA6ArXoWYcCUBZadT7lk72om+7BOW83Lsx14pK//TWAVO4OUDPcrT0BlIUmpXxKL0c924WL81/h0kI7tIutBYAE1QAXoNoDiMdEmotGowiHw4iEQ3sDKAutblpHUXPKO3HR34HLgTZcWWpFw/KtAkDyDbdhMkH7EmAkEkYoFEI4tFUCQPEkVBbauVlOOUVNKdcGviTzFlxdbsa1RzcVAFHV6PMZiFORcuSbm5vY2tpUB4iL8ovC5NSitPF+NOEJyEdABmrRs+KCgFg0QsZbMgBJFSASkzPAv+286UEUjxUzwD3XgyDEEKVxPneOemNjQ1JJgFA0Af5JxnYK6aQAIA1kaSwVR4aE7SSN7ZC2SbSO55HCTkYuMjaWzUUIlJEYmUcp8jCdPZ9/XpyNkgA8US69BsDv6N06Q4IHD6NeoxVGix0W+yBM1kEYTDboVdYp1dzSPkTm8lsxNf5A4Hd0HmCqcoi95O8CakdyF0xztExiL/nL6D/eNJo/AfYbrUh4P/oyAAAAAElFTkSuQmCC" />