使用 onload 未完全加载图像

Question

canvasArray 包含分割图像，当在浏览器中打开时，<canvas> 元素应该显示在表格中，例如 3x3
第一次打开页面时，屏幕上会呈现一个空表（问题），当再次单击它时，它会正确显示 <canvas> 元素，大概是因为它们被缓存了
他们为什么没有第一次显示？我尝试在代码中使用ctx.drawImage(img,xoffset,yoffset); 两次，在onload 事件内部和外部
考虑如果图像在循环之外没有正确绘制，一旦onload 事件触发它会再试一次，但它不会..

Image URL<input type="text" id="image" value="images/hippo.jpg"/><br>


var canvasArray = Project.split( $("#image").val() , rowCount * rowCount); 
 // eg Project.split("https://image.com/funny.jpg, 3, 3");

var Project = {
  split: function(imgsrc, tiles) {

    var img = new Image(),
        canvasArray = new Array(),
        imgWidth,
        imgHeight,
        r,g,b = 0;
    img.onload = function(){
        xoffset = 0,
        offset = 0;

        for (var i = 0; i < tiles; i++){

            //create canvas element and set attributes and get the canvas context
            canvasArray[i] = document.createElement('canvas');
            canvasArray[i].setAttribute('width', tileW);
            canvasArray[i].setAttribute('height', tileH);    
            canvasArray[i].setAttribute('id', 'canvas'+i);
            var ctx = canvasArray[i].getContext('2d');

            ctx.drawImage(img,xoffset,yoffset);

            //if i is a multiple of the total number of tiles to a row,
            //move down a column and reset the row_col
            if((i + 1) % row_col == 0){
                yoffset -= tileH;
                xoffset =0;
            }else{
                //otherwise move across the image
                xoffset -= tileW; 
            }
        }
    };
    img.src = imgsrc;   

    //get the number of tiles in a row or column (row == column )
    var row_col = Math.sqrt(tiles),
        tileH = img.height / row_col,
        tileW = img.width / row_col,
        canvasArray = [tiles];

    var xoffset = 0,
        yoffset = 0;

    for (var i = 0; i < tiles; i++){

        //create canvas element and set attributes and get the canvas context
        canvasArray[i] = document.createElement('canvas');
        canvasArray[i].setAttribute('width', tileW);
        canvasArray[i].setAttribute('height', tileH);
        canvasArray[i].setAttribute('id', 'canvas'+i);
        var ctx = canvasArray[i].getContext('2d');

        ctx.drawImage(img,xoffset,yoffset);

        //if i is a multiple of the total number of tiles to a row,
        //move down a column and reset the row_col
        if((i + 1) % row_col == 0){
            yoffset -= tileH;
            xoffset =0;
        }else{
            //otherwise move across the image
            xoffset -= tileW; 
        }
    }

    return canvasArray;
}};

Answer 1

您需要检查img的complete，选择图像本身而不是val，在onload处理程序中计算图像尺寸，同样由于图像加载是异步操作，您需要使用回调，而不是返回数组：

// eg Project.split("https://image.com/funny.jpg, 3*3,function(canvasArray)");
var Project = {
    split: function(imgsrc, tiles, callback) {

        var canvasArray = new Array(),
            imgWidth, imgHeight, r, g, b = 0;
        var split = function() {
            console.log(1);
            var row_col = Math.sqrt(tiles),
                tileH = Math.round(img.height / row_col),
                tileW = img.width / row_col,

                xoffset = 0,
                yoffset = 0;
            for (var i = 0; i < tiles; i++) {
                //create canvas element and set attributes and get the canvas context
                canvasArray[i] = document.createElement('canvas');
                canvasArray[i].setAttribute('width', tileW);
                canvasArray[i].setAttribute('height', tileH);
                canvasArray[i].setAttribute('id', 'canvas' + i);
                var ctx = canvasArray[i].getContext('2d');

                ctx.drawImage(img, xoffset, yoffset);

                //if i is a multiple of the total number of tiles to a row,
                //move down a column and reset the row_col
                if ((i + 1) % row_col == 0) {
                    yoffset -= tileH;
                    xoffset = 0;
                } else {
                    //otherwise move across the image
                    xoffset -= tileW;
                }
            }
            callback(canvasArray);
        };
        var img = new Image();
        img.src = imgsrc;
        console.log(img.complete);
            if (img.complete) {split()} else  $(img).load(split);
    }
};
var tn = 3;
$("button").bind('click', function() {
    Project.split($("#image").val(), tn * tn, function(canvasArray) {
        for (var i in canvasArray) {
            $('body').append(canvasArray[i]);
            if ((i * 1 + 1) % tn == 0) {
                $('body').append($('<br>'))
            }
        }
        console.log(canvasArray);
    });


});

$("button").click();​

DEMO

Answer 2

在画布中使用图像之前，我确保它们是使用Imagesloaded jQuery Plugin 加载的。

您可以选择页面上的任何 DOM 元素，或者您可以动态创建图像并将它们添加到隐藏的 DOM 元素中，然后您可以在图像完成加载（包括失败）时执行回调函数

 var img = new Image();
 img.src = imgsrc;
 $(document.body).append(img);
 $(document.body).imagesLoaded( [ callback ] );

我使用这个插件是因为有一些问题和边缘情况，浏览器不会报告图像已完全加载。这包括浏览器返回导航、已超过磁盘限制的已启动缓存、从不触发缓存图像的移动浏览器等等。