使用html2canvas生成图片后传递至Controller时img1始终为null的问题

我通过html2canvas将div元素生成图片，随后将生成结果存入text类型的input控件中，提交表单后希望在Controller中获取该值，但客户端的newData和imageData值正常，Controller中的img1始终为null。

相关代码 #

客户端JS代码

var element = $("#chng");
html2canvas(element,{
  onrendered : function(canvas){
      var imageData = canvas.toDataURL("image/jpg");
      var newData= imageData.replace(/^data:image\/jpg/, "data:application/octet-stream");
      $("#img1").val(newData);       
  }
});
$("#infoForm").submit();

表单代码

<form method="post"  enctype="multipart/form-data" asp-controller="Answers" id="infoForm">
    <input type="text" id="img1" name="img1" />
    <input type="button" onclick="formsubmit()" value="print PDF" />
</form>

Controller代码

[HttpPost]
public async Task<IActionResult> PrintPDF(long wId, long cId, long pId, long aId, short no , string img1)
{
   //but img1 is always null
   //ToDO something here

    return View();
}

问题原因及解决方案 #

1. 异步执行顺序问题

html2canvas的onrendered是异步回调函数，当前代码中$("#infoForm").submit()在html2canvas初始化后立即执行，此时回调还未触发，#img1还没被赋值，提交的表单自然没有img1的有效数据。

解决方法：将表单提交逻辑移到onrendered回调内部，确保input赋值完成后再提交：

var element = $("#chng");
html2canvas(element,{
  onrendered : function(canvas){
      var imageData = canvas.toDataURL("image/jpg");
      var newData= imageData.replace(/^data:image\/jpg/, "data:application/octet-stream");
      $("#img1").val(newData);       
      // 赋值完成后再提交表单
      $("#infoForm").submit();
  }
});

2. 表单enctype设置不合理

表单设置了enctype="multipart/form-data"，这个编码类型专为文件上传设计，而这里提交的是文本格式的dataURL，使用默认的application/x-www-form-urlencoded编码更合适。multipart编码可能导致服务器无法正确解析长文本内容，最终使img1绑定为null。

解决方法：移除表单的enctype属性，使用默认编码：

<form method="post" asp-controller="Answers" id="infoForm">
    <input type="text" id="img1" name="img1" />
    <input type="button" onclick="formsubmit()" value="print PDF" />
</form>

3. 可选：超长文本限制处理（若dataURL过大）

如果生成的dataURL长度超出ASP.NET Core默认的请求长度限制，会导致数据被截断，最终img1为null。可以在Controller方法上添加特性配置允许更大的请求：

[HttpPost]
[RequestSizeLimit(10485760)] // 允许10MB请求内容，可根据实际情况调整
public async Task<IActionResult> PrintPDF(long wId, long cId, long pId, long aId, short no , string img1)
{
   // 业务逻辑
    return View();
}

内容的提问来源于stack exchange，提问作者nnmmss