同步画布绘制/读取

Syncing canvas drawing / reading

本文关键字：读取 绘制 布绘制 同步      更新时间：2023-09-26

所以我有一个小的静态类用于图像转换:

// static class ImageFactory
var ImageFactory = (function () {
    var ImageFactory = {};
    ImageFactory.flip = function (image) {
        return invert(image, false, true);
    };
    ImageFactory.mirror = function (image) {
        return invert(image, true, false);
    };
    // private
    function invert(image, isMirror, isFlip) {
        var canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        var context = canvas.getContext("2d");
        context.translate(isMirror ? canvas.width : 0, isFlip ? canvas.height : 0);
        context.scale(isMirror ? -1 : 1, isFlip ? - 1 : 1);
        context.drawImage(image, 0, 0);
        return canvas;
    }
    return ImageFactory;
})();

问题是:有时它会产生"空白"(完全透明)的图像，而不是翻转和镜像，在Chrome和Firefox中都是如此。我怀疑这与有时不能及时完成的异步操作有关。根据一些文献，画布绘图应该被浏览器同步处理，但这个问题告诉我另一种方式。

无论如何，是否有一种安全的方法来绘制到次要画布，然后使用该画布作为图像绘制在主画布上?

这段代码应该确保在所有输入图像准备好之前没有调用ImageFactory方法:

function load() {
    for (var i = 0; i < images.length; ++i) {
        var image = images[i];
        if (!image.complete) {
            var timeout = setTimeout(onTimeout, LOADING_TIMEOUT);
            return;
        }
    }
    scene = sceneFactory();
    loop();
    function onTimeout() {
        load();
    }
}

其中images只是一个包含DOM中所有图像的数组。只有在loop()被调用之后，我才有一些对ImageFactory方法的调用。

我不确定究竟是什么可能导致这个问题，但我猜这是由于图像没有准备好，当函数被调用。

加载完成后，尝试调用镜像函数。

使用image onload回调来检查图像是否已经完成加载并准备好使用。

你也可以尝试在一秒钟后再次绘制画布，只是为了确保它被正确绘制。

相关文章：