1

この JavaScript コードでは、一連の画像のリンクをダウンロードし、それらをグリッド テーマのキャンバスに描画します。リンクの数を取得し、それに応じてキャンバスの幅と高さを設定すると、1 行あたり 200 個の画像が表示されます。高さは画像の総数に基づいています。私が気づいている問題は、使用する高さに基づいて、画像がキャンバスに表示されることです。たとえば、高さを 12 行に設定すると画像が表示されますが、それ以上に設定すると画像が表示されません。また、1行に設定しても画像はFirefox 23でしか表示されません。IE9とchrome29では何も表示されません。

ここに何か問題があるかどうか、または多くの画像を大きなキャンバスに安定して描画する方法を知っている人はいますか?

ありがとう。

function onProfileSuccessMethod(sender, args) {

    alert("Request Arrived");

    var listEnumerator, picCount, item, picobj, path, office, ctx, x, y, imageObj;

    listEnumerator = listItems.getEnumerator();
    picCount = listItems.get_count();


    var w = 125;
    var h = 150;
    var rl = 200;

    var canvas = document.createElement('canvas');
    canvas.id     = "picGallery";
    canvas.width  = w * rl;
    canvas.height = h * 12// * Math.ceil(picCount/rl);
    canvas.style.zIndex = 0;
    canvas.style.border = "0px solid white";
    context = canvas.getContext("2d");

    x = 0;
    y = 0;
    while (listEnumerator.moveNext()) {
        item = listEnumerator.get_current();
        picobj = item.get_item('Picture');
        office = item.get_item('Office');
        office = office == null ? "" : office;

        if (picobj != null) {
            path = picobj.get_url();

            imageObj = new Image();
            imageObj.xcoor = x;
            imageObj.ycoor = y;

            imageObj.src = path;
            imageObj.onload = function() {
                context.drawImage(this, this.xcoor, this.ycoor, w, h);
            };
        }

        x += w;
        if (x == canvas.width) {
            x = 0;
            y += h;
        }
    }

    document.body.appendChild(canvas);
}
4

1 に答える 1

1

わかりました、私は私の予感の証拠を見つけています:

IE の場合、キャンバスのレンダリング可能なサイズは 8192x8192 です。msdnに従って、

キャンバス上のレンダリング領域の最大サイズは、キャンバスのサイズに関係なく、0.0 ～ 8192 x 8192 ピクセルです。たとえば、幅と高さが 8292 ピクセルのキャンバスが作成されたとします。次に、「ctx.fillRect (0,0, canvas.width, canvas.height)」として長方形の塗りつぶしが適用されます。座標 (0, 0, 8192, 8192) 内の領域のみがレンダリングされ、100 ピクセルの境界線が残ります。キャンバスの右と下

Mozilla の開発者は、「ハードウェア アクセラレーションを使用している場合はキャンバス サイズを制限しています。ハードウェア アクセラレーションを使用していない場合に制限される理由がわかりません」などのスニペットを含む公開討論を行っています。

Chrome の場合、SO 参照がさらに見つかりました: drawImage(canvas) chrome size limit?

于 2013-07-10T20:09:46.420 に答える