JavaScriptの変数から戻り値を取得

Question

イメージを確認するJavaScript関数がnullかどうかを調べ、関数を呼び出してイメージをbase64文字列に変換しますが、イメージを変換した後も常にその変数値を返すことができませんundefiendを示します。 updateUserDetailsそのonclick関数は、それを解決するのに役立ちます。

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; 
} 

Answer 1

のonload関数は非同期です、あなたが戻って、次のように呼び出しを使用してこの問題を解決することができます。

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.