I am trying to call a function saveBadge() and getting the value of the function to use in the for loop.But every time I am getting the value from an array where I am converting the div tag to Image. but every time I am getting the last value. How do I handle the Asynchronous call?.
for(var j=0;j<anarray.length;j++)
{
var json=JSON.parse(anarray[j]);
// adding in badge image
alert(anarray[j]);
var imgTem=json['regId']['image'];
var imgFin=imgTem.replace("dataimage","data:image").replace("base64",";base64,");
$("#name").text(json['regId']['fname']+" "+json['regId']['lname']); // User name
var imgTem=json['regId']['image'];
var imgFin=imgTem.replace("dataimage","data:image").replace("base64",";base64,");
$("#image").attr("src",imgFin); // User Image
$("#gender").text(json['regId']['gender']); // User Gender
//QRcode generator
var qrcode = json['badgeId']; // User QRcode
var qr = new QRious({
element: document.getElementById('qrcanvas'),
value: qrcode,
background: 'white', // background color
foreground: 'black', // foreground color
level: 'L', // Error correction level of the QR code (L, M, Q, H)
mime: 'image/jpeg', // MIME type used to render the image for the QR code
size: 120 // Size of the QR code in pixels.
});
//qr.toDataURL("jpeg"); // Generates a base64 encoded data URI for the QR code.
savebadge();
var bdgImg = localStorage.getItem("bdgImg");
var qrjson = JSON.parse(anarray[j]);
qrjson.badgeImg=bdgImg.replace("data:image","dataimage").replace(";base64,","base64");
anarray[j]=JSON.stringify(qrjson);
} // End of for-loop
toReq();
});
Function Definition
function savebadge(){
for(var j=0;j<anarray.length;j++)
{
html2canvas($("#bdg"+j+""), {
onrendered: function(canvas) {
theCanvas = canvas;
var base64img = canvas.toDataURL();
badgeimg=base64img.replace("png","jpeg");
alert($("#name").text());
//console.log("render "+badgeimg);
localStorage.setItem("bdgImg",badgeimg);
var img = $("<img>",{
"src" : badgeimg,
"alt" : "badgeimg"
});
$("#divimg").append(img);
}
});
}}