Get Return Value From Variable in JavaScript

Question

I have JavaScript function which check the image is null or not and call the function to convert the image to base64 string, but after converting image also I can't able to return that variable value always shows undefiend.updateUserDetails its an onclick function, help me to solve it.

var userImgData;
function updateUserDetails() {

   if (userImgData === "undefined") {

        ImgData = (document.getElementById("userProfileImage"));
        getUserBase64Image(ImgData.src)
    }
  updateDetails(userImgData)
}

function updateDetails(userImgData )
{
    //i am calling ajax to update
}

function getUserBase64Image(img) {

var i = img;
var canvas = document.createElement('canvas'),
    ctx = canvas.getContext('2d'),
    img = new Image();
img.onload = function () {
    canvas.width = img.width;
    canvas.height = img.height;

    if (canvas.width > canvas.height) {
        canvas.style.width = "320px";
    } else {
        canvas.style.height = "300px";
    }

    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    var dataURl = (canvas.toDataURL('image/jpeg'));
     userImgData = dataURl.replace("data:image/jpeg;base64,", " ")

    return userImgData ;
}
img.src = img;
}

Think carefully, where are you waiting for the return value? I.e. where are you calling the onload event handler? — Teemu, Jan 24 '17 at 19:06
What specific variable is `undefined`? Where do you define it? — David, Jan 24 '17 at 19:09
You are never invoking `updateUserDetails()` anywhere in this code, but even if you were, unless you explicitly set `userImgData` to the string literal "undefined" your `if` condition would fail. What you want to do is `if (userImgData == undefined)` <-- yes, use == not ===, or you can say `if (typeof userImgData === "undefined")` — mhodges, Jan 24 '17 at 19:10
@4castle That's not the issue - the issue is that updateUserDetails() is not being called in the `img.onLoad` handler, and the if statement logic is flawed - nothing is asynchronous about this. — mhodges, Jan 24 '17 at 19:14
@mhodges `img.onload` is asynchronous, and calling the function instead of returning the value is the proposed solution in the dupe. — 4castle, Jan 24 '17 at 19:30

score 0 · Answer 1 · answered Jan 24 '17 at 19:13

onload function is asynchronous, you can solve this problem using call back as follow :

 function updateDetails(customerImgData,CB)
    {
      //i am calling ajax to update
     }

      function getUserBase64Image(img) {

    var i = img;
     var canvas = document.createElement('canvas'),
    ctx = canvas.getContext('2d'),
    img = new Image();
    img.onload = function () {
    canvas.width = img.width;
    canvas.height = img.height;

    if (canvas.width > canvas.height) {
        canvas.style.width = "320px";
    } else {
        canvas.style.height = "300px";
    }

    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    var dataURl = (canvas.toDataURL('image/jpeg'));
     userImgData = dataURl.replace("data:image/jpeg;base64,", " ");

     CB(userImgData);

    return userImgData ;
  }
 img.src = img;
}

function updateUserDetails(imageData){
      //you will get image data here in variable "imageData",
      //put your code here.
}

updateUserDetails(customerImgData,updateUserDetails);//function call.

Get Return Value From Variable in JavaScript

1 Answers1