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);
        }
    });
});

https://github.com/rails/jquery-ujs/wiki/ajaxから ajax を形成します。

次に、html2canvas ( http://html2canvas.hertzen.com/documentation.html ) を使用して DIV から画像を作成し、それをサーバーに渡す必要があります。

ただし、フォームが最初に送信され、html2canvas が後で完了します (フォームは空白の #slide_thumbnail で送信され、その後にデータが入力されます)。

ここに html2canvas の代わりに alert('hello') を配置すると、アラートが最初に機能し、'Ok' を押してフォームが送信されるのを待っています。

画像が作成されてから送信されるのを待つことはできますか?

4

2 に答える 2

1

これも適用できます ( DEMO ) :

$("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 に答える