Question

我在正在转换为画布的页面上有svgs，然后成功发布了html2canvas数据。我遇到的麻烦是在发布html2canvas数据后提交表单。我试过简单地使用

$('#chartInfo').submit()

在AJAX成功和错误中，但是没有执行。所以，我尝试使用延迟下面提交表单，但我得到的ajaxDfd是未定义的？我不知道我在哪里错了。我猜这是因为我在ajax中使用延迟？

$(document).ready(function() {

    $( '#save_dashboard' ).click(function() {

        // Declare an array to store all deferred objects from each svg element
        var svgDfds = [],
            ajaxDfd
            targetElem = $('#contentzone-outer');

        targetElem.find('svg').each(function() {
            var dfd = new $.Deferred(),
                svg = $(this),
                canvas = $('<canvas></canvas>');

            svg.replaceWith(canvas);

            // Get the raw SVG string and curate it
            var content = svg.wrap('<p></p>').parent().html();
            content = content.replace(/xlink:title='hide\/show'/g, '');
            content = encodeURIComponent(content);
            svg.unwrap();

            // Create an image from the svg
            var image = new Image();
            image.src = 'data:image/svg+xml,' + content;
            image.onload = function() {
                canvas[0].width = image.width;
                canvas[0].height = image.height;

                // Render the image to the canvas
                var context = canvas[0].getContext('2d');

                // Resolve or reject the deferred
                dfd.resolve(context.drawImage(image, 0, 0));
            };

            // Push deferred object into array
            svgDfds.push(dfd);

        }); // end of targetElem.find('svg').map(function() {...});

        // Check for all deferreds
        $.when.apply($, svgDfds).then(function(_canvas) {
            console.log('svgDfds resolve done', _canvas);
            ajaxDfd = new $.Deferred();

            $('#contentzone-outer').html2canvas({
                onrendered: function (canvas) {
                    //Set dashboardPng value to image data (base-64 string)
                    var dashboardPng = canvas.toDataURL('image/png');
                    console.log('dashboardPng: ' + dashboardPng);

                    $.ajax({
                        url:'save_dashboard_image.php',
                        data:{dashboardPngData: dashboardPng},
                        type:'POST',
                        dataType:'json',
                        success: function(){
                            console.log('success');
                        }
                        ,
                        error: function(xhr, status, error){
                            console.log('The requested page was: ' + document.URL +
                                '. The error number returned was: ' + xhr.status +
                                '. The error message was: ' + error);
                        }
                    })
                    .done(function(){
                        console.log('AJAX success()');
                    })
                    .always(function(){
                        ajaxDfd.resolve(console.log('AJAX complete()'));
                        return ajaxDfd.promise();
                    })
                    .fail(function(){
                        console.log('AJAX error()');
                    }); // end of save_dashboard_image.php
                } // end of html2canvas
            }); // end of onrendered
        }); // end of $.when.apply($, svgDfds).then(function(_canvas) {...}

        ajaxDfd.done(function(){
            $('#chartInfo').submit();
        });
    }); // end of save_dashboard click function
}); // end of document ready

Answer 1

    // Declare an array to store all deferred objects from each svg element
    var svgDfds = [],
        ajaxDfd
        targetElem = $('#contentzone-outer');

在ajaxDfd＆＃39;之后你忘记了一个逗号。

更新：你试图在

之外调用方法

    $.when.apply($, svgDfds).then(function(_canvas) { .. }

我认为async（=＆gt; ajaxDfd在读取ajaxDfd.done（...）时仍未定义。你为什么不试图把它放在

的内部（可能在底部）

    $.when.apply($, svgDfds).then(function(_canvas) { 
      .....
      ajaxDfd.done(function(){
          $('#chartInfo').submit();
      });
     }

Answer 2

我使用普通的旧ajax，而不是尝试使用submit（），无论如何都可以使用。

$(document).ready(function() {

    $( '#save_dashboard' ).click(function() {

        var chartInfoSerialized = $('#chartInfo').serialize();
        console.log('chartInfoSerialized: ' + chartInfoSerialized);

        $.ajax({
            url:'createDashboard_and_ReportPair.php',
            data: chartInfoSerialized,
            type:'POST',
            dataType:'json',
            success: function(){
                console.log('createDashboard_and_ReportPair.php success');
            },
            error: function(xhr, status, error){
                console.log('The requested page was: ' + document.URL +
                    '. The error number returned was: ' + xhr.status +
                    '. The error message was: ' + error);
            }
        }) // end of POST request to createDashboard_and_ReportPair.php
        .always(function() {
            console.log('AJAX complete createDashboard_and_ReportPair.php');

        });

        // Declare an array to store all deferred objects from each svg element
        var svgDfds = [],
            ajaxDfd,
            targetElem = $('#contentzone-outer');

        targetElem.find('svg').each(function() {
            var dfd = new $.Deferred(),
                svg = $(this),
                canvas = $('<canvas></canvas>');

            svg.replaceWith(canvas);

            // Get the raw SVG string and curate it
            var content = svg.wrap('<p></p>').parent().html();
            content = content.replace(/xlink:title='hide\/show'/g, '');
            content = encodeURIComponent(content);
            svg.unwrap();

            // Create an image from the svg
            var image = new Image();
            image.src = 'data:image/svg+xml,' + content;
            image.onload = function() {
                canvas[0].width = image.width;
                canvas[0].height = image.height;

                // Render the image to the canvas
                var context = canvas[0].getContext('2d');

                // Resolve or reject the deferred
                dfd.resolve(context.drawImage(image, 0, 0));
            };

            // Push deferred object into array
            svgDfds.push(dfd);

        }); // end of targetElem.find('svg').map(function() {...});

        // Check for all deferreds
        $.when.apply($, svgDfds).then(function(_canvas) {
            console.log('svgDfds resolve done', _canvas);
            ajaxDfd = new $.Deferred();

            $('#contentzone-outer').html2canvas({
                onrendered: function (canvas) {
                    //Set dashboardPng value to image data (base-64 string)
                    var dashboardPng = canvas.toDataURL('image/png');
                    console.log('dashboardPng: ' + dashboardPng);

                    $.ajax({
                        url:'save_dashboard_image.php',
                        data:{dashboardPngData: dashboardPng},
                        type:'POST',
                        dataType:'json',
                        success: function(){
                            console.log('success');
                        }
                        ,
                        error: function(xhr, status, error){
                            console.log('The requested page was: ' + document.URL +
                                '. The error number returned was: ' + xhr.status +
                                '. The error message was: ' + error);
                        }
                    })
                    .done(function(){
                        console.log('AJAX success()');
                    })
                    .always(function(){
                        ajaxDfd.resolve(console.log('AJAX complete()'));
                        // return ajaxDfd.promise();
                        $('#chartInfo').submit();
                    })
                    .fail(function(){
                        console.log('AJAX error()');
                    }); // end of save_dashboard_image.php
                } // end of html2canvas
            }); // end of onrendered
        }); // end of $.when.apply($, svgDfds).then(function(_canvas) {...}
    }); // end of save_dashboard click function
}); // end of document ready

如何在deferred.then之后提交ajax表单

2 个答案: