如何從MVC中的控制器下載由html2canvas創建的字節形式的圖像（在瀏覽器中顯示保存對話框）？

Question

我正在嘗試使用Ajax將image2canvas創建的圖像發送到控制器，然后使用控制器下載它。

這是我的代碼：

$("#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" rules="all" border="1" style="border-collapse: collapse;">
    <tr>
        <th scope="col" style="width: 90px;">Customer id</th>
        <th scope="col" style="width: 120px;">Name</th>
        <th scope="col" 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>
</table>

這是我的控制器動作：

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

但是問題是當控制器返回文件時，在瀏覽器中什么也沒有發生。 而不提示您保存文件。

Answer 1

我認為您的問題是函數將成為異步諾言。 因此，您必須在其中調用ajax。

因此，您在控制器上收到null的原因是，那時功能尚未完成。 並且base64字符串為null。 如果您想了解更多信息，請嘗試閱讀有關異步javascript如何工作或promises如何工作的更多信息；）。

看看這個線程： html2canvas javascript截圖和上傳