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

Yes, sure: http://stackoverflow.com/questions/8149127/set-a-property-on-viewbag-dynamic-object-in-f — Gilles Criton, May 01 '14 at 20:17

score 1 · Accepted Answer · answered May 01 '14 at 21:15

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" />

Hi Joel, many thanks for your answer, I tried this: let myChart = myChart.CopyAsBitmap() let stream = new MemoryStream() let myPngChart = myChart.Save(stream, Imaging.ImageFormat.Png) let buffer = Array.zeroCreate (int stream.Length) stream.Read(buffer, 0, buffer.Length)|> ignore Convert.ToBase64String(buffer) But it seems that I do not use MemoryStream correctly. Could you, please, provide an example? — Gilles Criton, May 02 '14 at 09:27

score 0 · Answer 2 · answered May 02 '14 at 13:36

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:

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

2 Answers2