Javascript：在图像加载之前绘制画布

Question

我正在尝试制作所有 174x174 像素的图像拼贴。该程序成功找到了图像，这些图像都位于我的服务器上。但是，只有单击“保存图像”按钮两次才能找到它。这让我相信画布是在 img 标签加载源之前绘制的。当我向 img.onload 添加警报功能时，这一点得到了证实。

这里是点击“保存图片”按钮时触发的功能。

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();
    }
}

这可能是什么原因造成的，我该如何解决？

Answer 1

将ctx.drawImage(img, posX, posY)和下载功能移动到img.onload，

并设置 img crossOrigin 属性以避免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;


                    }

Answer 2

您确实需要将下载函数放在函数之外，并在i 和j 最后一次加载图像时调用它。

更新后的代码如下：

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);
  }
}

从当前函数中删除下载并为该进程创建新的。

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();
}