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

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

来源

2013-07-10 omega

什么是getEnumerator（）？ – dandavis

因此，每个图像是125x150像素？因为您将画布宽度设置为125 * 200 = 25000像素，并将高度设置为更合理的150 * 12 = 1800像素。 –

这是无关的，但如果您必须知道，它是一个Microsoft SharePoint客户端对象模型函数，用于枚举从ajax请求（ecma脚本）返回的对象。 – omega

好吧，我发现证据，我的预感：

对于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，包括像“使用硬件加速时，我们限制画布大小，我不明白为什么它不会使用硬件加速时的限制片段。 “

对于Chrome，我发现更多的SO引用：drawImage(canvas) chrome size limit?

来源

2013-07-10 20:09:46

好的，我认为我的画布太大了，所以我将它们分成几个画布，最大尺寸为8192x8192，然后它应该与所有浏览器。 – omega

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

回答

相关问题