Javascript function does not return any value

Question

When I call this function at first time, I got exception like this

ReferenceError: getCanvas is not defined.

At second time function return value for me.

I want function return value at every call.

Thank you in advance..

var getCanvas; // global variable      

function dimage() {
    //get canvas image
    var element = $("#pnldevice");
    html2canvas(element, {
        onrendered: function (canvas) {
            $("#previewImage").append(canvas);
            getCanvas = canvas;
            alert(getCanvas);
        }
    });
    var imgageData = getCanvas.toDataURL("image/png");
    // Now browser starts downloading it instead of just showing it
    var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
    $("#btn-Convert-Html2Image").attr("download", "your_pic_name.png").attr("href", newData);
};

You're expecting to have your food ready to eat (`getCanvas`) after ordering it (`html2canvas`), but before it's been cooked (`onrendered`). [Why is my variable unaltered after I modify it inside of a function?](http://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron) — Jonathan Lonowski, Apr 02 '16 at 05:58
@JonathanLonowski: Actually, I am facing a issue in gridview javascript validation. I need ur help on this. I have posted the link for the issue which I asked on stackoverflow. Kindly suggest what's wrong with the code. — Nad, Apr 02 '16 at 06:07

Loenix · Accepted Answer · 2016-04-02T12:58:09.457

You should use getCanvas only when this is ready, when you call html2canvas, your canvas is not ready immediatly and you try to use it.
All your code should be in the onrendered function you initialize, you could use a call to another function to dissociate your code from html2canvas.

I dont know html2canvas, i am speaking globally knowing the behavior of most of libraries.

Note: You should not name your variable getCanvas, we keep get for function (action) and it seems to be an object.

var myCanvas; // global variable      

function dimage() {
    //get canvas image
    var element = $("#pnldevice");
    html2canvas(element, {
        onrendered: function (canvas) {
            $("#previewImage").append(canvas);
            myCanvas= canvas;
            console.log("myCanvas", myCanvas);// F12 to see console and see your logs
            //alert(myCanvas);// We prefer to use console :-P
            // Maybe you should pass canvas as parameter
            onCanvasReady();
        }
    });
}

function onCanvasReady() {
    var imgageData = myCanvas.toDataURL("image/png");
    // Now browser starts downloading it instead of just showing it
    var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
    $("#btn-Convert-Html2Image").attr("download", "your_pic_name.png").attr("href", newData);
}

All JS canvas world is very complex, if you are a beginner, you may lack the basics.

Be careful, the download attribute is not valid, to use custom one, use data => .data("download", "your_pic_name.png") and .data("download").

Sorry,i am new in javascript,i am not understand how to call it from other function? — Pravin, Apr 02 '16 at 06:40
i am separated html2canvas from dimage() function to another function and call it into main function.but still function first time not return value. — Pravin, Apr 02 '16 at 06:43
Be careful, the download attribute is not valid, to use custom one, use data => .data("download", "your_pic_name.png") and .data("download"). — Loenix, Apr 02 '16 at 12:58
Thank you for your time,but its not working on first click.At second click on download button image has been downloaded. — Pravin, Apr 04 '16 at 05:47
To create a download link to canvas image, i think you should keep the base64 metadata. Please make a jsfiddle to test it. — Loenix, Apr 04 '16 at 14:15

Javascript function does not return any value

1 Answers1