javascript - 使用 JS 创建用户屏幕截图并通过 ajax 问题发送到服务器

Question

我为我的网站创建了一个支持选项，我也想显示屏幕截图。 我找到了 html2canvas 库，没关系 - 它运行良好。

我做的第一件事是准备用户屏幕截图:

$( "#openHelpModal" ).on( "click", function() {

   html2canvas(document.querySelector("body"), {
    onrendered: function (canvas) {

      let pngUrl = canvas.toDataURL();
      $('#screenshoot').text(pngUrl);


    },
  });
   $('#helpModal').modal('show');

});

用户打开模式窗口并提交其他数据(例如姓名、电话)后...我想通过 ajax 将该数据发送到服务器，如下所示:

$("#help").submit(function(e) {
    e.preventDefault();
    s_name = $('#s_name').val();
    s_phone = $('#s_phone').val();
    s_screenshoot =  encodeURIComponent($('#screenshoot').val());
$.ajax({
           type: "GET",
           url: '/help',
           data: {name:s_name, phone:s_phone, screenshoot: s_screenshoot},
           dataType: "json",
           success: function(data)

           {


            }
           },
                      error: function(data) {
           }
         });
});

但是，当我尝试提交数据时，出现错误:

有什么问题吗？当我尝试不发送 base64 图像时，一切都很好...我该如何解决我的问题？

Answer 1

如果您使用 POST 而不是 GET 来发送大数据，效果会更好。您很可能会超出 GET 请求的字符限制。 您收到的错误没有显示确切的详细信息。这也可能是 404 错误，如果是这种情况，则可能是您的 Web 服务不接受所有这些参数或者您的 url 格式错误。