4

canvasArray分割された画像が含まれています。ブラウザで開くと、<canvas>要素はテーブルに表示されるはずです。たとえば、3x3
初めてページを開くと、空のテーブルが画面に表示されます（問題）。もう一度クリックすると、<canvas>要素が正しく表示されます。おそらく、キャッシュされているためです。
なぜ彼らは初めて表示されないのですか？ctx.drawImage(img,xoffset,yoffset);コード内でonloadイベント内と外で2回使用してみました。
画像がループの外で正しく描画されない場合は、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;
}};
4

2 に答える 2

0

キャンバスで画像を使用する前に、ImagesloadedjQueryプラグインを使用して画像が読み込まれていることを確認します。

ページ上の任意のDOM要素を選択するか、画像を動的に作成して非表示のDOM要素に追加すると、画像の読み込みが完了するたびに（失敗を含む）コールバック関数を実行できます。

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

このプラグインを使用するのは、ブラウザが画像が完全に読み込まれたと報告しない問題やエッジケースがいくつかあるためです。これには、ブラウザのバックナビゲート、ディスク制限を超えたプライムキャッシュ、キャッシュされたイメージを起動しないモバイルブラウザなどが含まれます。

于 2012-12-24T02:06:31.673 に答える
0

imgをチェックcompleteし、代わりに画像自体を選択しval、onloadハンドラー内で画像のサイズを計算する必要があります。また、画像の読み込みは非同期操作であるため、returnarrayの代わりにcallbackを使用する必要があります。

// 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();​

デモ

于 2012-12-24T02:00:04.847 に答える