在大画布上绘制大量图像时出现异常行为答案

【问题标题】：Unusual behaviour when drawing lots of images onto a large canvas在大画布上绘制大量图像时出现异常行为
【发布时间】：2013-07-11 04:09:46
【问题描述】：

在这段 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);
}

【问题讨论】：

什么是 getEnumerator() ？
所以每张图片都是125x150像素？因为您将画布宽度设置为 125 * 200 = 25000 像素，将高度设置为更合理的 150 * 12 = 1800 像素。
这无关紧要，但如果您必须知道，它是一个 Microsoft SharePoint 客户端对象模型函数，用于枚举从 ajax 请求（ecma 脚本）返回的对象。
@Scott，每张图片将被绘制为 125x150 像素，但其原始尺寸更大。我设置了这个宽度，因为我想要每行 200 张图片，高度应该是h * Math.ceil(picCount/rl)，但我注意到当时没有加载任何图像。所以我尝试了一些更小的h * 12，然后只有 Firefox 可以看到图像......
我可以恭敬地建议您重新设计您的应用程序以一次显示更少的图像。如果用户正在查看 200*12=2400 或更多图像，他们将失去焦点（并且可能失去兴趣）。也许将图像分组，让用户探索他们感兴趣的组。

标签： javascript browser canvas

【解决方案1】：

好的，我正在为我的预感寻找证据：

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

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

Mozilla 的开发人员有一个 public discussion，包括 sn-ps，例如“我们在使用硬件加速时限制画布大小，我不明白为什么不使用硬件加速时会受到限制。”

对于 Chrome，我发现了更多 SO 参考：drawImage(canvas) chrome size limit?

【讨论】：

好的，我觉得我的画布太大了，所以我将它们分成几个画布，最大尺寸为 8192x8192，然后它应该适用于所有浏览器。