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? — Jonathan Lonowski
– Jonathan Lonowski, Commented Apr 2, 2016 at 5: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. — HEEN
– HEEN, Commented Apr 2, 2016 at 6:07

Loenix · Accepted Answer · 2016-04-02 12:58:09Z

0

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").

edited Apr 2, 2016 at 12:58

answered Apr 2, 2016 at 6:02

Loenix

1,1191 gold badge11 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Pravin Over a year ago

Sorry,i am new in javascript,i am not understand how to call it from other function?

Pravin Over a year ago

i am separated html2canvas from dimage() function to another function and call it into main function.but still function first time not return value.

Loenix Over a year ago

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

Pravin Over a year ago

Thank you for your time,but its not working on first click.At second click on download button image has been downloaded.

Loenix Over a year ago

To create a download link to canvas image, i think you should keep the base64 metadata. Please make a jsfiddle to test it.

Collectives™ on Stack Overflow

Javascript function does not return any value

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related