html2canvas generates image url, but url variable cannot be accessed outside of local scope

Question

I am using html2canvas and I have not had any issues until now. I have a div which overflows vertically, but I want to capture all the content of the div by "stitching" the images generated by html2canvas together. These image "pieces" will together form the whole overflow contents. My test function (called on a button click) looks like this:

function canvasTest() {
    document.getElementById("myTestDiv").style.display = "block";
    html2canvas($("#myCanvasDiv"), {
        onrendered: function(canvas) {
            var myImage = canvas.toDataURL("image/png");
            document.getElementById("myTestDiv").innerHTML = '<img src="' + myImage + '" alt="img">';
            alert(myImage);
        }
    });
}

Briefly, the contents of #myCanvasDiv are fed into the innerHTML of myTestDiv and this works fine. However, for a vertically-overflowing #myCanvasDiv, I want to push multiple image URLs into an array, then use the contents of this array to serve as the src elements for several images that together, will be the "stitched" innerHTML of myTestDiv. However, the var myImage in the function above cannot even be taken out of the function(canvas) block of code. It has scope local to function(canvas) only, because as soon as either the innerHTML or alert is taken out of the function(canvas) :

function canvasTest() {
    document.getElementById("myTestDiv").style.display = "block";
    html2canvas($("#myCanvasDiv"), {
        onrendered: function(canvas) {
            var myImage = canvas.toDataURL("image/png");
            document.getElementById("myTestDiv").innerHTML = '<img src="' + myImage + '" alt="img">';
        }
    });
    alert(myImage);
}

Chrome throws an error that myImage is not defined. I tried returning the value of myImage as follows:

function canvasTest() {
    document.getElementById("myTester").style.display = "block";
    html2canvas($("#SampleSolutionAppendSpace"), {
        onrendered: function(canvas) {
            var myImage = canvas.toDataURL("image/png");
            document.getElementById("myTester").innerHTML = '<img src="' + myImage + '" alt="img">';
            (function () {
                return myImage;
            })();
        }
    });
    alert(myImage);
}

I also tried making the return function a variable:

function canvasTest() {
    document.getElementById("myTester").style.display = "block";
    html2canvas($("#SampleSolutionAppendSpace"), {
        onrendered: function(canvas) {
            var myImage = canvas.toDataURL("image/png");
            document.getElementById("myTester").innerHTML = '<img src="' + myImage + '" alt="img">';
            var pleezWork = function () {
                return myImage;
            };
        }
    });
    alert(pleezWork);
}

But still I cannot access the variables local to function(canvas)

How can I access var myImage outside of the function(canvas) scope?

Answer 1

尝试逐步调试代码，看看在触发事件触发之前是否未调用alert（）。