F# Set a property on ViewBag dynamic object (passing an image)

Question

I tried to use the solution that Tomas Petricek wrote on this website but not for a string but for an image. Unfortunately, it doesn't work. This is my code:

Model:

let ChartModelCumulativePerformance =
   let numMths                  = 60
   let trackOfDates numMths     = firstDate.AddMonths(numMths)
   let trackHF                  = [for x in 0 .. 59 ->(trackOfDates x, HFReturns.[x])]
   let trackBchk                = [for x in 0 .. 59 ->(trackOfDates x, BchkReturns.[x])]
   Chart.Line(trackHF,Name="Hedge Fund") |> ignore
   Chart.Line(trackBchk,Name="Benchmark") |> ignore
   let myChart =  Chart.Combine(
   [Chart.Line(trackHF,Name="Hedge Fund")
    Chart.Line(trackBchk,Name="Benchmark")])
   myChart.CopyAsBitmap()
member this.CreateCumulativePerformanceGraph() = ChartModelCumulativePerformance

Controller:

 let dataChart = res.CreateCumulativePerformanceGraph()
 let (?<-) (viewData:ViewDataDictionary) (name:string) (value: Image) = viewData.Add(name, value)
 this.ViewData?chartCumulative <- dataChart
 this.View("HFAnalysis") :> ActionResult

View

<img src =@ViewBag.chartCumulative height="80" width="80"/ alt="" /> 

or

<img src =@ViewData["chartCumulative"] height="80" width="80"/ alt="" />

Otherwise, do you know another methodologies? Thank in advance for your help

Answer 1

Ultimately you've got an HTML problem, not an F# problem here.

If you want to put image data directly into the src attribute of an img tag, you have to convert it to a base-64 string and then prefix it with the appropriate meta-data according to the Data URI standard.

I would convert your bitmap to a PNG (to shrink the file size) and then get a byte array for the image and pass it to Convert.ToBase64String. Ultimately you'll end up with something like this:

<img width="80" height="80" src="data:image/png;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" />

Answer 2

Many thanks Joel !!!! This is the code for those who would be interested:

Model:

 let ChartModelCumulativePerformance =
   //... code for building a Chart
   let myChart      = myChart.CopyAsBitmap()
   let ms           = new MemoryStream()
   let tempVar      = myChart.Save(ms,Imaging.ImageFormat.Png)
   let imageData    = ms.ToArray()
   let imageBase64  = Convert.ToBase64String(imageData)
   String.Format("data:image/png;base64,{0}", imageBase64)   

Controller:

let dataChart = res.CreateCumulativePerformanceGraph()
let (?<-) (viewData:ViewDataDictionary) (name:string) (value: String) = viewData.Add(name, value)
this.ViewData?chartCumulative <- dataChart
  this.View("HFAnalysis") :> ActionResult

View: