Trying to create an image on the server

[Richard]

     I'm trying to generate a PDF report and I need the charts I generate for my HTML for the PDF file. I'm trying to send the image data to the server but when I try to load it into an image object it fails. Hoping you can help me.

-- Code on client side

        kendo.drawing.drawDOM($("#ESChart"))
            .then(function (group) {
                return kendo.drawing.exportImage(group);
            })
            .done(function (data) {
                chartData = encodeURI(data);

                $.ajax({
                    method: "POST",
                    data: chartData,
                    url: "/Home/CreateFacilityReport" + location.search,
                })
                    .done(function (msg) {
                        alert(msg);
                    })
                    .fail(function (data) {
                        alert("Failed to load svg");
                    });
            });

 

-- Code on server side

        public ActionResult CreateFacilityReport(string FacilityId, string chartData)
        {

            string myData = HttpUtility.UrlDecode(chartData.ESChart);

            byte[] myBytes = Encoding.ASCII.GetBytes(myData);

            using (var ms = new MemoryStream(myBytes))
            {
                Image myImage = Image.FromStream(ms, true, false);      <---- Blows up here and gets a 'Parameter is not valid'
                myImage.Save("/ESChart.png");
            }
}

[Ivan Danchev]

Hello Richard,

I don't see anything wrong with the Drawing configuration, so the issue could be due to handling the data on the server incorrectly, for example accessing chartData.ESChart when chartData is a string.

Consider using the approach we've shown in the following demo: https://demos.telerik.com/aspnet-mvc/pdf-export

The Kendo saveAs method is used to send the data (as base64 string) to the server:

 kendo.saveAs({
                dataURI: data,
                fileName: "HR-Dashboard.png",
                proxyURL: "@Url.Action("Pdf_Export_Save")"
            });

A note here, forceProxy: true should also be set to ensure the file is not saved on the client.

And on the server the file is saved like this:

public ActionResult Pdf_Export_Save(string contentType, string base64, string fileName)
        {
            var fileContents = Convert.FromBase64String(base64);

            return File(fileContents, contentType, fileName);
        }

Give this a try and let us know if it works as expected. For more details on the saveAs method refer to this documentation article.

Regards,
Ivan Danchev
Progress Telerik