Любой метод javascript для обнаружения обложки изображения на холсте?

Question

Я развиваю следующий случай.

1. Html холст, созданный JS.
2. На картинке есть изображение звезды (загруженное из png с альфа-фоном) и изображение с бриллиантом (также загруженное из png с альфа-фоном).
3. алмазное изображение движется к изображению звезды.
4. , когда изображение с бриллиантами полностью находится за звездообразным изображением, как показано только изображение звезды, а изображение с бриллиантами полностью находится за звездообразным изображением, оповещение («Скрыто»);
5. Если отображается более одного пикселя алмаза, предупреждение не должно появляться.

Поскольку альфа-значение фона звезды равно 0, что означает, что звезда не является прямоугольником, трудно определить, полностью ли изображение звезды полностью покрывает алмазное изображение.

Есть ли библиотека или способ определить, полностью ли покрыто изображение другим?

Или кто-нибудь знает имя этого алгоритма, чтобы я мог реализовать в JS?

Спасибо за помощь!

Answer 1

Для объектов с неизвестной формой мы можем проверить, находится ли объект позади, используя проверку пикселей.

Вот полный пример того, как сделать это:

ONLINE DEMO HERE

(GameAlchemist предоставил modified version here)

/// 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; 

Основная функция проверяет пиксели в пределах области, определенной выше , Для оптимизации мы можем сузить область поиска. Если вам нужно проверить, отображается ли изображение на другом уровне, регион просто расширяется, чтобы проверить эту область.

Функция сравнивает экранный холст с самым передовым изображением, нарисованным против «живого» холста, на котором рисуются фон и передний план.

Если живое холст = за пределами экрана, это означает, что фоновое изображение не видно.

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; 
    } 
}