How to download image that is in the form of bytes created by html2canvas from controller in MVC?

Question

0.00/5 (No votes)

See more:

I am trying to send image created by image2canvas to controller using ajax and then download it using controller.

Here is my code:

JavaScript

$("#btnExportAsImageByPost").click(function () {
            var base64;
            html2canvas($("#Table")[0]).then(function (canvas) {
                base64 = canvas.toDataURL();
                document.body.appendChild(canvas);
                alert(base64);
                $("[id*=hfImageData]").val(base64);
            });
            alert(base64);
            var url = "/HtmlToImage/Index/";
            $.ajax({
                type: 'POST',
                url: url,
                data: base64,
                dataType: "string",
                success: function (evt) {
                    $("#Table").hide('slow');
                },
            });
        });

HTML

<div id="Table" style="width: 340px; background-color: White; padding: 5px">
    <table cellspacing="0" border="1">
        <tbody><tr>
            <th style="width: 90px">Customer id</th>
            <th style="width: 120px">Name</th>
            <th style="width: 120px">Country</th>
        </tr>
        <tr>
            <td>1</td>
            <td>John Hammond</td>
            <td>United States</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Mudassar Khan</td>
            <td>India</td>
        </tr>
    </tbody></table>
</div>
<div>
    <input type="button" name="btnExportAsImageByPost" id="btnExportAsImageByPost" value="Export as image(Post)" />
</div>

Here is my controller action:

C#

[HttpPost]
[ActionName("Index")]
public ActionResult Index_Post(string base64)
{
   byte[] bytes = Convert.FromBase64String(base64);
    return File(bytes, "image/png", "HtmlToImage.png");
}

But problem is nothing happens in browser when the controller returns file. Instead of prompting to save file.

What I have tried:

The above code is what I tried till now

Posted 1-Nov-16 4:18am

Nithin B

Updated 1-Nov-16 8:52am

v2

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Yuriy Loginov · Answer 1 · 2016-11-01T05:57:00

try this:

$.ajax({
                type: 'POST',
                url: url,
                data: { base64: base64 },
                dataType: "string",
                success: function (evt) {
                    $("#Table").hide('slow');
                },
            });

Also your URL does not seem to match the controller name

Richard Deeming · Answer 2 · 2016-11-01T08:52:00

First problem:
Looking at your code, the html2canvas function returns a Promise[^].

The callback function passed to then won't be invoked immediately; it will be invoked when the function has completed.

Therefore, when you go to post the data, the base64 variable will be blank, and you will be sending an empty string to your controller.

To solve that, you need to move the remainder of your function to the callback:

JavaScript

$("#btnExportAsImageByPost").click(function () {
    html2canvas($("#Table")[0]).then(function (canvas) {
        var base64 = canvas.toDataURL();
        document.body.appendChild(canvas);
        alert(base64);
        $("[id*=hfImageData]").val(base64);
        
        var url = "/HtmlToImage/Index/";
        $.ajax({
            ...
        });
    });
});

Second problem:
As pointed out in Solution 1, you need to post an object with the correct parameter name:

JavaScript

$.ajax({
    type: 'POST',
    url: url,
    data: { base64: base64 },
    dataType: "string",
    success: function (evt) {
        $("#Table").hide('slow');
    }
});

Third problem:
The string returned from the canvas.toDataURL() method[^] will be a data URI[^] - something that looks like:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC

If you try to pass that string to Convert.FromBase64String, you will get an exception, because it is not a valid Base64-encoded string.

You need to remove the data:image/png;base64, prefix from the start of the string first.

C#

[HttpPost]
[ActionName("Index")]
public ActionResult Index_Post(string base64)
{
    int index = base64.IndexOf(',');
    if (index != -1) base64 = base64.Substring(index + 1);
    
    byte[] bytes = Convert.FromBase64String(base64);
    return File(bytes, "image/png", "HtmlToImage.png");
}