Question

我正在开发一个Web应用程序，用户可以使用该应用程序构建包含可以保存文本和/或图像的简单对象（矩形）的网格。用户可以根据自己的喜好创建这些对象，并在每个可以容纳图像的对象中上传自己的对象。如果你想测试它，该应用程序在线：goalcandy.com （使用 demo@demo.com / 演示获取电子邮件和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有时会在一些用户上传的图像所在的空间中变成空白，因为图像不会被绘制到帆布。好像他们还没有完成下载。在一台好的，快速的计算机上，这不会发生。我怎样才能解决这个问题，为什么会这样呢？考虑到我已经为“load”事件附加了一个处理程序，我没有看到逻辑......

每次都没有在HTML5画布上绘制图像

0 个答案: