0

我对 JS 不是很熟悉，并且对下一个任务感到困惑。

我有远程表单，但在发送数据之前我需要做一些操作（用数据填写表单输入）。这是我的代码：

$('.edit_slide').on('ajax:beforeSend', function(event, xhr, settings) {
    html2canvas($('.slide_canvas'), {
      onrendered:
        function(canvas) {
            var img = canvas.toDataURL("image/png");
            $('#slide_thumbnail').val(img);
        }
    });
});

表单 ajax 来自：https ://github.com/rails/jquery-ujs/wiki/ajax 。

接下来，我需要使用 html2canvas ( http://html2canvas.hertzen.com/documentation.html ) 从 DIV 创建图像并将其传递给服务器。

但是首先发送表单，然后完成 html2canvas（表单提交时使用空白 #slide_thumbnail 并在之后填写数据）。

如果我把 alert('hello') 放在这里而不是 html2canvas，alert 会首先工作，它正在等待我按下“Ok”并在之后提交表单。

是否可以等待图像被创建并在之后发送？

4

2 回答 2

1

这也可以应用（演示）：

$("form").on('submit', function(e) {
    e.preventDefault(); // prevent form submission
    console.log('Submit Prevented...');

    // do stuf, i.e.
    html2canvas($('.slide_canvas'), {
        onrendered : function(canvas) {
            var img = canvas.toDataURL("image/png");
            $('#slide_thumbnail').val(img);

            // Submit using ajax
            $.ajax({
                type : 'post',
                url : 'your_url',
                data : { html : $('#slide_thumbnail').val() },
                success : function(data){
                    console.log('Data returned fron the server : ' + data);
                }
            });
        }
    });
});
于 2013-07-21T12:47:53.150 回答
0

您的问题是 html2canvas 立即返回，设置稍后调用的回调。ajax 调用完成后调用回调。

解决方案：

  1. 让表单在 ajax 发送之前调用 html3canvas，然后在 onrendered 回调之后调用 ajax 发送。（这是表单上的 javascript ）
  2. 等待 ajax 发送函数内的回调。( http://api.jquery.com/category/deferred-object/ )
于 2013-07-21T12:25:52.047 回答