CODEWITHSUNDEEP
javascriptc#asp.nethighchartsbase64
ibrahim noureddine
ibrahim noureddine

Reputation: 99

Exception when converting to image from Base-64 string

I am trying to send a Highcharts chart via image on ASP.NET button click. What I am trying to do is:

Convert the chart to base64 image, the code is the following : 

  var chart = $('#main-content').highcharts();
    EXPORT_WIDTH = 1000;
    var render_width = EXPORT_WIDTH;
    var render_height = render_width * chart.chartHeight / chart.chartWidth;

    var svg = chart.getSVG({
        exporting: {
            sourceWidth: chart.chartWidth,
            sourceHeight: chart.chartHeight
        }
    });
    var contentToSend = 'data:image/svg+xml;base64,' + window.btoa(svg);
    var hdnField = document.getElementById("MainContent_ChartImage");
    hdnField.value = contentToSend;

Next step is taking the base64 image value, convert it to image an attach it to the mail, the code is:

 string textImage = ChartImage.Value;

 var imageData = Convert.FromBase64String(HttpUtility.UrlDecode(data));
 System.Net.Mail.LinkedResource res;
 AlternateView htmlView;
 using (MemoryStream ms = new MemoryStream(imageData, true))
 {
      ms.Position = 0;
      ms.Write(imageData, 0, imageData.Length);
      ms.Seek(0, SeekOrigin.Begin);
      res = new System.Net.Mail.LinkedResource(ms);
      htmlView = AlternateView.CreateAlternateViewFromString("<html><body><img src='cid:imageReport' width='100%' ></body></html>", null, "text/html");
      res.ContentId = "imageReport";
      htmlView.LinkedResources.Add(res);
      MailMessage mailMsg = new MailMessage();
      SmtpClient client = new SmtpClient();

      // ...

      mailMsg.IsBodyHtml = true;
      mailMsg.AlternateViews.Add(htmlView);
      client.Send(mailMsg);
 }

but the method Convert.FromBase64String throws an exception

{"The input is not a valid Base-64 string as it contains a non-base 64 character, more than two padding characters, or an illegal character among the padding characters. "}

However when I remove 'data:image/svg+xml;base64,' then convert it, it doesn't throw an exception but the image will not appear. What should I do?

Thank you

Upvotes: 3

Views: 779

Answers (2)

ibrahim noureddine
ibrahim noureddine

Reputation: 99

After many researches I found the solution , the main problem was that not all client email support data URI : What is Data URI support like in major email client software?

i was trying to open the mail from the outlook 2016 however it is not supported , when i opened from hotmail.com it worked..

the code is : 

MailMessage mailMsg = new MailMessage();
SmtpClient client = new SmtpClient();
var imageData = Convert.FromBase64String(data);
var contentId = Guid.NewGuid().ToString();
var linkedResource = new LinkedResource(new MemoryStream(imageData), "image/svg+xml");
linkedResource.ContentId = contentId;
linkedResource.TransferEncoding = TransferEncoding.Base64;
var body = string.Format("<img src=\"cid:{0}\" />", contentId);
var htmlView = AlternateView.CreateAlternateViewFromString(body, null, "text/html");
 htmlView.LinkedResources.Add(linkedResource);
 mailMsg.AlternateViews.Add(htmlView);

Upvotes: 0

John Bindel
John Bindel

Reputation: 243

Get rid of the beginning part of the string: "data:image/svg+xml;base64," that part is not base64, just the remainder is. You don't need to use HttpUtility.UrlDecode either.

You should specify the TransferEncoding as Base64:

res.TransferEncoding = System.Net.Mime.TransferEncoding.Base64;

However with all that said, there are some strong caveats to using SVG in email. So you may want to consider a different format such as JPG or PNG. If that's the route you take, you will need to use a library to convert formats.

Upvotes: 1

Related Questions