Получить dataurl из canvas после каждого нового рисунка в canvas

Question

Я пытаюсь перебрать определенный список и всегда перерисовывать свой холст. После перерисовки холста я пытаюсь получить dataurl холста и вставить его в массив. Эта часть работает, но она всегда дает мне тот же dataurl, что и первый.

Когда я смотрю на рисунок на холсте, я всегда получаю правильный результат, но не могу получить dataurl для этого чертежа.

var planNo = 0;
var map_json = {};

function getCanvasImages() {
    var coordinates = {};

    var plans = $.getJSON(site_url + 'DesktopModules/DNN.WebAPI/API/Ajax/GetPlanProjectsByProjectNo?projectNo=P0104');
    var lots= $.get(site_url + 'DesktopModules/DNN.WebAPI/API/Ajax/GetTranslatedByProjectNo?projectNo=P0104');

    $.when(plans, lots).done(function (p, l) {
        if (p != null && p != undefined) {
            var imagePositionY = 10;
            var table = $('table.livingTable');         

            $.each(p[0], function (key, value) {
                var canvas = map_shape[0]; // or document.getElementById('canvas');
                canvas.width = canvas.width;

                planNo = p[0][key].PlanNo;
                map_json = p[0][key].Coordinates;

                if (map_json != null) {
                    if (map_json.image != undefined) {
                        if (map_json.image.shift_x == undefined) map_json.image.shift_x = 0;
                        if (map_json.image.shift_y == undefined) map_json.image.shift_y = 0;
                        if (map_json.image.scale == undefined) map_json.image.scale = 1;

                        if (map_json.image.filename != undefined) {
                            loadImage();
                        }
                    }

                    if (map_json.shapes == undefined) {
                        map_json.shapes = [];
                    }
                }
            });                
        }
    });
};

var dataUrls = [];

function loadImage() {
    //console.log(map_json);
    map_bg_img.onload = function () {
        updateBackground();
        updateIcons();
        canvas.fadeIn("fast");
    }
    map_bg_img.src = (map_json.image.filename.indexOf("http") > -1 ? map_json.image.filename : map_json.image.filename);
    dataUrls.push(canvas[0].toDataURL("image/jpeg"));
}

Кто-нибудь может мне помочь?

Answer 1

Поместите.push() в свою нагрузку:

dataUrls.push(canvas[0].toDataURL("image/jpeg"));

Помни что map_bg_img.src является асинхронным, поэтому он начнет работать и сразу же перейдет к следующей строке в вашем коде - так что ваш цикл идет быстрее, чем вы ожидаете.