CODEWITHSUNDEEP
javascripthtml
Douglas Northwell
Douglas Northwell

Reputation: 35

Javascript: Canvas is being drawn before image loads

I'm trying to make a collage of images that are all 174x174 pixels. The program successfully finds the images, which are all located on my server. However, it is only able to find it if I click the "save image" button twice. This led me to believe that the canvas was being drawn before the img tag had loaded the sources. This was confirmed when I added an alert function to img.onload.

Here is the function that is triggered when the "save image" button is clicked.

function saveimg(urls)
{
    if(urls.length!=0)
    {
        ///get chart canvas
        var c = document.getElementById('chart');

        //get array length
        var length = urls.length;

        //set correct canvas size

        /*not relevant to the error*/

        //get canvas content
        var ctx=c.getContext("2d");

        //make background black
        ctx.fillStyle = "black";
        ctx.fillRect(0, 0, c.width, c.height);


        var i, j, posX = 0, posY = 0, count = 0;
        for(i = 0; i < rows; i++)
        {
            for(j = 0; j < columns; j++)
            {
                if(count < length-2){
                    //assign source to img element
                    var cover = /*image url*/;

                    //if image is not found then draw a gray block
                    if(cover=='../resources/.png'){
                        ctx.fillStyle = "#D3D3D3";
                        ctx.fillRect(posX, posY, 174, 174);
                    }
                    else{
                            //create img html tag
                            var img = document.createElement("img");

                            //check if image loaded
                            img.onload = function(){
                                alert("success");
                            }

                            //assign image source
                            img.src = cover;

                            /draw on canvas
                            ctx.drawImage(img, posX, posY);
                        }
                    }
                }
                posX += 174;
                count++;
            }
            posX = 0;
            posY += 174;
        }   
        //auto-download canvas as a png
        var link = document.createElement('a');
        link.download = 'charts4all.png';
        link.href = c.toDataURL("image/png");
        link.click();
    }
}

What could be causing this and how can I solve it?

Upvotes: 1

Views: 178

Answers (2)

Ullas Hunka
Ullas Hunka

Reputation: 2211

You do require to put your download function outside the function and call it on the image load when i and j is last.

Updated Code should be as follows:

if (i == rows - 1 && j == columns - 1) {
  img.onload = function() {
    img.src = cover;

    //draw on canvas
    ctx.drawImage(img, posX, posY);
    //Call your download function here
    onCompleteLoad();
  }
} else {
  img.onload = function() {
    img.src = cover;

    //draw on canvas
    ctx.drawImage(img, posX, posY);
  }
}

Remove the download from current function and create new for the process. 

function onCompleteLoad() { //auto-download canvas as a png
  var link = document.createElement('a');
  link.download = 'charts4all.png';
  link.href = c.toDataURL("image/png");
  link.click();
}

Upvotes: 1

Clocher Zhong
Clocher Zhong

Reputation: 2456

Move ctx.drawImage(img, posX, posY) and download function into img.onload,

and set img crossOrigin attribute to avoid Tainted canvases issue 

                        var img = document.createElement("img");
                         // avoid Tainted canvases issue
                        img.setAttribute("crossOrigin",'Anonymous');

                        //check if image loaded
                        img.onload = function(){
                            alert("success");
                            //draw on canvas
                            ctx.drawImage(img, posX, posY);

                            var link = document.createElement('a');
                            link.download = 'charts4all.png';
                            link.href = c.toDataURL("image/png");
                            link.click();
                        }

                        //assign image source
                        img.src = cover;


                    }

Upvotes: 1

Related Questions