Изображение не загружается полностью с помощью onload

canvasArray содержит разделенное изображение, при открытии в браузере элементы <canvas> должны отображаться в таблице, например 3x3
При первом открытии страницы таблица emtpy отображается на экране (проблема), при повторном нажатии она правильно отображает элементы <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;
}};
2 4
javascript canvas onload

2 ответа:

Вам нужно проверить complete 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();​

Демо

0

Прежде чем использовать изображения на холсте, я удостоверяюсь, что они загружены с помощью плагина Imagesloaded jQuery.

Вы можете выбрать любой элемент DOM на странице, или вы можете динамически создавать изображения и добавлять их в скрытый элемент DOM, тогда вы можете выполнить функцию обратного вызова всякий раз, когда изображения закончат загрузку (включая сбой)

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

Я использую этот плагин, потому что есть несколько проблем и крайних случаев, когда браузер не будет сообщать изображение как будучи полностью загруженным. Это включает в себя обратную навигацию браузера, загруженный кэш, который превысил лимит диска, мобильные браузеры, которые никогда не запускают кэшированные изображения, и многое другое.

0