0

我正在开发一个网络应用程序，用户可以使用该应用程序构建一个包含简单对象（矩形）的网格，这些对象可以保存文本和/或图像。用户可以根据需要创建任意数量的这些对象，并在每个可以保存图像的对象中上传他们自己的一个。如果您想测试该应用程序是否在线：goalcandy.com （使用demo@demo.com/demo作为电子邮件和pswd字段登录）。

一旦他们完成工作，他们就可以将该网格转换为 PNG。这是通过首先在 HTML 画布上绘制网格上的所有内容来完成的，然后在本地将其转换为 PNG 图像。

当需要将现有图像数组绘制到画布上时，我首先必须预加载它们，我这样做是这样的：

query = [];   // array with paths to the image

var count = query.length,
    images = [],
    loaded = 0;

for (i=0; i<count; i++) {
    images[i] = new Image();
    images[i].onload = function(){
        loaded++;
        if (loaded == count)
                           drawOnCanvas();
    };
    images[i].src = query[i];
}

function drawOnCanvas() {
        // draw the images onto the canvas
}

所有这一切的问题在于，在一台缓慢、“疲惫”的计算机上，PNG 有时会在一些用户上传的图像应该存在的空间中显示为空白，因为图像不会被绘制到画布上。好像他们还没有完成下载。在一台好的、快速的计算机上，这不会发生。我该如何解决这个问题，为什么会这样？考虑到我已经为“加载”事件附加了一个处理程序，我看不到逻辑......

4

0 回答 0