0

Here is my code. I want to return value of front_image but its returning blank string.

function get_front_image(callbackFunction){
    var front_image="";
    html2canvas($('#selector'), {
        onrendered: function(canvas) {
             front_image=canvas.toDataURL();
             callbackFunction(front_image);
        }
    });
}

i m trying to get it value of front_image like this 

var f;
    var a=get_front_image(function(value){
      f= value;
     });
    alert(f);// it returns blank

how can i get this value from this function please suggest me the answer. Thanks in advance

Krishna Karki
  • 1,304
  • 4
  • 14
  • 31

2 Answers2

2

In your function get_front_image you assign an empty string to the variable front_image, then you call the html2canvas function, which has an onrendered function. This function is called asynchronous, so by the time you're returning the front_image variable, the onrendered function is not called yet, which means front_image is still an empty string.

Mostly when doing asynchronous stuff, you'll work with callback functions. Here that could look something like this:

function get_front_image(callbackFunction){
    var front_image="";
    html2canvas($('#selector'), {
        onrendered: function(canvas) {
             front_image=canvas.toDataURL();
             callbackFunction(front_image);
        }
    });
}

var f;
get_front_image(function(value){
    f = value;
    alert(f); //will return your value
});
alert(f); //Wont alert your value

To make it clear in which order what's executed:

  1. Var f is declared var f;
  2. get_fron_image is called, and the html2canvas function is called. This is asynchronous, so the onrendered function will be called just when it's finished, and we can't know when this will happen.
  3. The alert(f); //wont alert your value line is executed. As the onrendered function hasn't been called yet, f does not have a value yet.
  4. Eventually, the onrendered function is executed, and the callbackFunction is called, where alert(f); shows your value as expected. Whatever you want to do with your variable f must happen in the callbackFunction in order to work.
Community
  • 1
  • 1
Michael Kunst
  • 2,978
  • 25
  • 40
  • var f; `get_front_image(function(value){ f = value; alert(f);// it alerts here }); alert (f);// but not here :( ` – Krishna Karki Dec 16 '13 at 11:35
  • it doesn't alert out of the function – Krishna Karki Dec 16 '13 at 11:36
  • yes, because it's asynchronous. Check out the link I provided in my answer. If you're still having trouble, edit your answer and specify what you're trying to achieve, and where the variable f will be needed. – Michael Kunst Dec 16 '13 at 11:51
  • I have edited the answer please check it once and suggest me the solution. – Krishna Karki Dec 16 '13 at 12:03
  • You won't get the value there, ever. Not possible. As I said you need to show us for what you need the variable `f`, otherwise an answer other than what I've given you is not possible – Michael Kunst Dec 16 '13 at 12:13
  • thanks for your answer. is it possible to get value of f using settimelimit() ? – Krishna Karki Dec 16 '13 at 12:52
  • If you mean `setTimeout`, then yes. But do **NOT** do that. It's very bad practice, and there's always a risk that the onrendered function won't be finished, even if you use a `setTimeout`. – Michael Kunst Dec 16 '13 at 13:02
0

html2canvas onrendered will run asynchronously, by then your function returning the empty var which was not initialized.

So, we have to use callback functions for long running tasks. You can implement your functions as below.

function get_front_image(callback){
 html2canvas($('#selector'), {
    onrendered: function(canvas) {
      var url = canvas.toDataURL();
      callback(url);
    }
});
}

And call the function as below.

get_front_image(function(link){
alert(link);
});
Sundeep1501
  • 1,510
  • 1
  • 18
  • 28