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

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

Поместите .С() внутри OnLoad:

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

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