將大量圖像繪製到大畫布上時出現異常行爲

在此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

將大量圖像繪製到大畫布上時出現異常行爲

回答

相關問題