用于画布图像封面检测的任何 JavaScript 方法

Any javascript method for canvas image cover detection?

本文关键字：检测 任何 JavaScript 方法 封面 布图像 图像 用于      更新时间：2023-09-26

我正在开发以下案例。

  1. 由 JS 创建的 HTML 画布。
  2. 画布上有一个星形图像（从 png 加载，背景为 alpha=0）和钻石图像（也从 png 加载，背景为 alpha=0
    3. ）。
  3. 钻石图像正在向恒星图像移动。
    4. 当钻石图像完全在星形图像后面
  4. 时，例如仅显示星形图像而钻石图像完全位于星形图像后面，alert（"隐藏"）;
  5. 如果显示钻石的多个像素，则不应显示警报。
由于星星

背景的alpha值为0，这意味着星星不是矩形，因此很难检测星星图像是否完全覆盖了钻石图像。

是否有任何库或方法可以检测图像是否完全被其他图像覆盖？

或者，有没有人知道这个算法的名称，以便我可以在 JS 中实现？

感谢您的任何帮助！

对于形状未知的物体，我们可以使用像素检查来检查物体是否在后面。

以下是有关如何执行此操作的完整示例：

在线演示在这里

（GameAlchemist在这里提供了修改版本）

/// basic allocations
var ctx = demo.getContext('2d'),
    os = document.createElement('canvas'),
    octx = os.getContext('2d'),
    w = os.width = demo.width,
    h = os.height = demo.height,
    /// the images
    urlD = 'http://i.imgur.com/U72xIMZ.png',
    urlS = 'http://i.imgur.com/n5rgo11.png',
    imgD = new Image(),
    imgS = new Image(),
    cnt = 2,
    /// check region (optimized)
    rect = [140, 140, 180, 60];
/// load images and when ready, start show    
imgD.crossOrigin = imgS.crossOrigin = 'anonymous';
imgD.onload = imgS.onload = function() {
    cnt--;
    if (cnt === 0) start();
}
imgD.src = urlD;
imgS.src = urlS;

main 函数检查上面定义的区域内的像素。为了优化，我们可以缩小搜索区域。如果您需要检查图像在其他尺寸上是否可见，则只需扩展该区域即可检查该区域。

该函数将屏幕外画布与仅绘制的最前面的图像与绘制背景和前景的"实时"画布进行比较。

如果实时画布 = 屏幕外画布，则表示背景图像不可见。

function start() {
    octx.drawImage(imgS, (w - imgS.width) * 0.5, 20);
    var x = -50,
        buffer1 = octx.getImageData(rect[0], rect[1], rect[2], rect[3]).data,
        len = buffer1.length;
    loop();
    function loop() {
        ctx.clearRect(0, 0, w, h);
        ctx.drawImage(imgD, x, 130);
        ctx.drawImage(imgS, (w - imgS.width) * 0.5, 20);
        if (compare() === true) {
            info.innerHTML = 'Object is behind!';
            return;
        }
        x += 2;
        if (x < w) requestAnimationFrame(loop);
    }
    function compare() {
        var buffer2 = ctx.getImageData(rect[0], rect[1], rect[2], rect[3]).data,
            i = len - 1;
        while(i--) {
            if (buffer1[i] !== buffer2[i]) return false
        }
        return true;
    }
}
相关文章：