在这个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);
}
答案 0 :(得分: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