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

您確實需要將下載功能放到功能之外，並在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();
}

Answer 2

將ctx.drawImage(img, posX, posY)並下載功能到img.onload ，

並設置img crossOrigin屬性，以避免出現畫布污染的問題

                        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;


                    }