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属性来避免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;


                    }

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

2 个答案: