在大画布上绘制大量图像时的异常行为
Unusual behaviour when drawing lots of images onto a large canvas
在这个javascript代码中,我下载了一堆图像链接,然后将它们绘制到网格主题中的画布上。我得到了链接的数量,然后相应地设置画布的宽度和高度,所以每行有200个图像。高度基于图像总数。我注意到的问题是,根据我使用的高度,图像会显示在画布上。例如,如果我将高度设置为12行,那么我会看到图像,但如果我将其设置为超过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);
}
好吧,我正在为我的直觉寻找证据:
对于IE,画布的可渲染大小为8192x8192。根据msdn,
画布上渲染区域的最大大小为0,0到8192x8192像素,与画布的大小无关。例如,创建的画布的宽度和高度为8292像素。然后,矩形填充被应用为"ctx.fillRect(0,0,canvas.width,canvas.height)"。只有坐标(0,0,8192,8192)内的区域才能被渲染,在画布的右侧和底部留下100像素的边界
Mozilla的开发人员进行了公开讨论,其中包括一些片段,如"我们在使用硬件加速时限制画布大小,我不明白为什么不使用硬件加速会限制画布大小。"
对于Chrome,我发现了更多的SO参考:drawImage(画布)Chrome大小限制?
相关文章:
- 如何使用url加载程序在webpack中导入多个图像
- nodejs-expressjs上传图像并显示它们
- 使用JSP从服务器检索和显示图像
- 角度:在ng重复上切换图像
- 画廊图像未显示
- Phonegap-(安卓/iphone)多个图像的图像库出现问题
- Javascript排序的图像弹出窗口..可以't单独弹出
- 画布数据到图像
- Windows8应用程序(html&Javascript):从图片库(除了文件选择器)显示图像的另一种方式
- 每当我试图将简单的图像源转换为数据URL时,就会出现安全错误异常
- canvas.toDataURL() 抛出安全异常,尽管图像是本地的
- phantomjs使用src图像在canvas.toDataURL上抛出DOM异常18
- 从Canvas生成图像,除Firefox外的所有浏览器都存在安全异常
- 在大画布上绘制大量图像时的异常行为
- Bootstrap Carousel相同的图像大小(异常偏移)
- Android从内部图像获取ImageData()-SECURITY_ERR:DOM异常18
- 在fabric.js中设置背景图像会在单击时引发异常
- javascript中有效的base64图像字符串出现DOM异常5无效字符错误
- 为什么chrome仍然记录404(未找到)错误,即使在onError处理程序捕获异常后,丢失的图像
- 当尝试通过画布绘制图像时异常