image compare

by Евгений

HTML

<button class="points-btn">3 points</button>
<button class="contentJSON-btn">content JSON</button>
<button class="contentObj-btn">content Object</button>
<!-- <button class="blob-btn">compare Blobs</button> -->
<div class="result"></div>
<div class="debug"></div>
<div class="resume"></div>

SCSS

.result,
.resume,
.debug {
  border: 1px solid grey;
  background-color: #dbdbdb;
  padding: 0 4px 4px 4px;
  line-height: 1.5rem;
  &::before {
    display: block;
    padding: 4px;
    margin: 0 -4px 4px;
    background-color: grey;
  }
  &:empty {
    display: none;
  }
}

.result::before {
  content: 'Reference';
}
.resume::before {
  content: 'Matched';
}
.debug::before {
  content: 'Set to compare';
}

JavaScript

//////// UI
const referenceUrl = 'http://fiddle.jshell.net/img/logo-white.png';
const urls = ['/img/logo.png', '/img/logo-white.png'];
const log = (selector, urls, isForever = false) => {
	const html = urls.map(url => `<img src="${url}">`).join('');
  document.querySelector(selector).innerHTML = html;
  if (!isForever) setTimeout(() => log(selector, [], true), 2000);
}
log('.result', [referenceUrl], true);
log('.debug', urls, true);

//////// General



////// 3 points

const getPixelColor = (img, x, y) => {
  canvas = document.createElement('canvas');
  canvas.getContext("2d").drawImage(img, 0, 0, img.width, img.height);
  return canvas.getContext("2d").getImageData(x, y, 1, 1).data;
}

const comparePoints = (img1, img2) => {
  // точки сравнения
  const points = [
    [18, 3],
    [11, 1],
    [39, 22]
  ]
  return points.every(([x, y]) => {
    var colors1 = getPixelColor(img1, x, y);
    var colors2 = getPixelColor(img2, x, y);
    return colors1.toString() === colors2.toString();
  })
}

const comparePointsHandler = (urls, referenceUrl) => {
	const promises = [
    referenceUrl,
    ...urls
  ]
  .map(url => getHtmlImageElement(url))
  
  return Promise.all(promises)
    .then(([referenceData, ...imgs]) => {
    return imgs
      .map((imgData, index) => imgData.size === referenceData.size && comparePoints(referenceData, imgData) ? urls[index] : null)
      .filter(Boolean);
  })
}
document.querySelector('.points-btn').addEventListener('click', (event) => {
	comparePointsHandler(urls, referenceUrl)
  	.then(urls => log('.resume', urls));
});

////// JSON

const getHtmlImageElement = (url) => new Promise((resolve, reject) => {
  const img = new Image();
  img.onload = () => resolve(img);
  img.onerror = () => reject();
  img.src = url;
});

const getImageData = (url) => getHtmlImageElement(url)
  .then(img => {
    const cIn = document.createElement('canvas');
    cIn.width = img.width;
    cIn.height = img.height;
    const ctxIn = cIn.getContext('2d');
   ...