Javascript 图像未使用onload完全加载

canvasArray

包含分割图像，在浏览器中打开

元素时应显示在表格中，例如3x3
首次打开页面时，屏幕上呈现emtpy表（问题），再次单击时，它会正确显示

元素，可能是因为它们被缓存了
为什么它们不是第一次展示？我尝试使用

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

图像URL

var canvasArray=Project.split（$（“#image”）.val（），rowCount*rowCount）；
//例如项目分割（“https://image.com/funny.jpg, 3, 3");
var项目={
拆分：功能（imgsrc、分幅）{
var img=新图像（），
canvasArray=新数组（），
imgWidth，
伊姆盖特，
r、 g，b=0；
img.onload=函数（）{
xoffset=0，
偏移量=0；
对于（变量i=0；i
您需要检查img的
完成
，选择图像本身而不是
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();​

//例如Project.split（“https://image.com/funny.jpg，3*3，函数（canvasArray）”；
var项目={
拆分：函数（imgsrc、tiles、回调）{
var canvasArray=新数组（），
imgWidth，imgHeight，r，g，b=0；
var split=function（）{
控制台日志（1）；
var row_col=Math.sqrt（瓷砖），
tileH=数学圆（img.高度/行/列），
tileW=图像宽度/行列，
xoffset=0，
yoffset=0；
对于（变量i=0；i'））
            }
        }
console.log（canvasArray）；
    });
});
$（“按钮”）。单击（）；​

在画布中使用图像之前，我要确保使用

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

我使用这个插件是因为有一些问题和边缘情况浏览器不会报告
 var img = new Image();
 img.src = imgsrc;
 $(document.body).append(img);
 $(document.body).imagesLoaded( [ callback ] );