This is a migrated thread and some comments may be shown as answers.

Trying to create an image on the server

1 Answer 56 Views
Drawing API
This is a migrated thread and some comments may be shown as answers.
Richard
Top achievements
Rank 1
Richard asked on 06 Mar 2020, 08:06 PM

     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");
            }
}


1 Answer, 1 is accepted

Sort by
0
Ivan Danchev
Telerik team
answered on 10 Mar 2020, 07:09 PM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Drawing API
Asked by
Richard
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
Share this question
or