I need help with sending a Highcharts chart as an image on ASP.NET button click. Here is what I am trying to accomplish:
To convert the chart into a base64 image, I am using the following code:
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;
The next step involves taking the base64 image value, converting it to an image and attaching it to the email. Here is the code snippet:
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);
}
However, 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. "}
When I remove 'data:image/svg+xml;base64,' before converting it, the exception doesn't occur but the image doesn't appear. Can anyone suggest a solution?
Thank you