Question

I am creating image in javascript and assigning that to a img element in javascript. How to pass that image to controller on ActionButton click in MVC3?

Javascript

var picture = jqplotToImg($('#ChartContent')); //method to change chart as picture, no needed here
var img = document.getElementById("img1");
img.src = picture;

View

@using (Html.BeginForm())
{
  <img id="img1" name="img1" />
 @Html.ActionButton("Export","ExportData","Report")
}

Controller

public void ExportReport(FormCollection fc)
{
}

Answer 1

I prompted the base64 string and then copied and used that to test and so it fails. I used ajax method for this and it works

    function ExportData() {
    var picture = jqplotToImg($('#ChartContent'));
    //prompt("", picture);

    $.ajax({ type: 'POST',
        url: '../Report/Base64ToImage',
        async: false,
        data: { source: picture },
        success: function (data) {
            //alert(data);
        }
    });
    window.location.href = "../Report/ExportChart";
}

[HttpPost]
    public void Base64ToImage(string source)
    {
        string base64 = source.Substring(source.IndexOf(',') + 1);
        base64 = base64.Trim('\0');
        byte[] data = Convert.FromBase64String(base64);
        string path = System.Configuration.ConfigurationManager.AppSettings["UploadFolder"].ToString();

        var file = Server.MapPath(path + "Chart.jpg");
        System.IO.File.WriteAllBytes(file, data);
    }