Question

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

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 ] );

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

图像未使用onload完全加载

2 个答案: