Nithin B Ответов: 2

Как загрузить изображение, которое находится в виде байтов, созданных html2canvas из контроллера в MVC?

Я пытаюсь отправить изображение, созданное image2canvas, на контроллер с помощью ajax, а затем загрузить его с помощью контроллера.

Вот мой код:

$("#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');
                },
            });
        });



<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>


Вот мое действие контроллера:


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


Но проблема в том, что в браузере ничего не происходит, когда контроллер возвращает файл. Вместо запроса на сохранение файла.

Что я уже пробовал:

Вышеприведенный код-это то, что я пробовал до сих пор

2 Ответов

Рейтинг:
1

Yuriy Loginov

попробовать это:

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


Кроме того, Ваш URL-адрес, похоже, не соответствует имени контроллера

Рейтинг:
1

Richard Deeming

Первая проблема:
Глядя на ваш код, html2canvas функция возвращает a Обещать[^].

Функция обратного вызова, переданная then он не будет вызван немедленно; он будет вызван, когда функция будет завершена.

Поэтому, когда вы переходите к публикации данных, base64 переменная будет пустой, и вы будете посылать пустую строку на свой контроллер.

Чтобы решить эту проблему, вам нужно переместить оставшуюся часть вашей функции в обратный вызов:

$("#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({
            ...
        });
    });
});


Вторая проблема:
Как указано в решении 1, вам нужно опубликовать объект с правильным именем параметра:
$.ajax({
    type: 'POST',
    url: url,
    data: { base64: base64 },
    dataType: "string",
    success: function (evt) {
        $("#Table").hide('slow');
    }
});


Третья задача:
Строка, возвращенная из то canvas.toDataURL() метод[^] будут URI данных[^] - то, что выглядит как:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC

Если вы попытаетесь передать эту строку Convert.FromBase64String, вы получите исключение, потому что это не допустимая строка в кодировке Base64.

Вам нужно удалить data:image/png;base64, префикс от начала строки сначала.
[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");
}