gpt4 book ai didi

javascript - 如何从 MVC 中的 Controller 下载由 html2canvas 创建的字节形式的图像(在浏览器中显示保存对话框)?

转载 作者:行者123 更新时间:2023-12-03 05:45:03 25 4
gpt4 key购买 nike

我正在尝试使用ajax将image2canvas创建的图像发送到 Controller ,然后使用 Controller 下载它。

这是我的代码:

$("#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>

这是我的 Controller 操作:

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

但问题是当 Controller 返回文件时浏览器中没有任何反应。而不是提示保存文件。

最佳答案

我认为你的问题是 then 函数将是异步 promise 。所以你必须在其中调用 ajax。

因此,您在 Controller 上收到 null 的原因是因为 then 函数当时尚未完成。并且 Base64 字符串为空。如果您想了解更多信息,请尝试阅读更多有关异步 javascript 如何工作或 Promise 如何工作的内容;)。

看看这个线程: html2canvas javascript screenshot and upload

关于javascript - 如何从 MVC 中的 Controller 下载由 html2canvas 创建的字节形式的图像(在浏览器中显示保存对话框)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40361664/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com