Question

在这个javascript代码中，我下载了一堆图像链接，然后将它们绘制到网格主题的画布中。我得到了链接的数量，然后相应地设置画布的宽度和高度，因此每行有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);
}

Answer 1

好的，我找到了预感的证据：

对于IE，画布的可渲染大小为8192x8192。根据{{3}}，

无论画布的大小如何，画布上渲染区域的最大大小为0到8192 x 8192像素。例如，创建宽度和高度为8292像素的画布。然后将矩形填充应用为“ctx.fillRect（0,0，canvas.width，canvas.height）”。只能渲染坐标（0,0,8192,8192）内的区域，留下100像素边框在画布的右下角

Mozilla的开发者有一个msdn，其中包括“我们在使用硬件加速时限制画布大小的片段，我不明白为什么在不使用硬件加速时它会受到限制。”

对于Chrome，我发现了更多SO引用：public discussion

将大量图像绘制到大型画布上时的异常行为

1 个答案: