Question

我正在尝试循环某个列表并始终重绘我的画布。重绘画布后，我正在尝试接收画布的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（）放在你的onload中：

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

请记住，map_bg_img.src是异步的，因此它将开始工作并立即释放到代码中的下一行 - 因此您的循环速度比预期的要快。

在画布中的每个新绘图之后获取画布的dataurl

1 个答案: