Palette tirée d'une image

CHARGER LA PHOTO

L'image reste dans le navigateur : rien n'est envoyé à un serveur.

function charger(fichier) {
  const url = URL.createObjectURL(fichier);
  const img = new Image();
  img.onload = () => {
    cv.width = 360;
    cv.height = Math.round(img.height * 360 / img.width);
    ctx.drawImage(img, 0, 0, cv.width, cv.height);
    URL.revokeObjectURL(url);              // on libère la mémoire
    analyser();
  };
  img.src = url;
}

LIRE LES PIXELS

getImageData renvoie r, g, b, a à la suite. On saute des pixels pour aller vite.

function pixels() {
  const d = ctx.getImageData(0, 0, cv.width, cv.height).data, px = [];
  const pas = Math.max(1, Math.floor(cv.width * cv.height / 6000));
  for (let i = 0; i < d.length; i += 4 * pas) if (d[i + 3] > 128) px.push([d[i], d[i + 1], d[i + 2]]);
  return px;
}

LA DISTANCE ENTRE DEUX COULEURS

L'œil est plus sensible au vert : on lui donne plus de poids.

const dist = (a, b) => 2 * (a[0] - b[0]) ** 2 + 4 * (a[1] - b[1]) ** 2 + 3 * (a[2] - b[2]) ** 2;

LES K-MOYENNES

Chaque pixel rejoint le centre le plus proche, puis chaque centre va au milieu de son groupe.

function kmoyennes(px, centres, passes = 8) {
  for (let n = 0; n < passes; n++) {
    const g = centres.map(() => ({ s: [0, 0, 0], n: 0 }));
    for (const p of px) {
      let j = 0;
      centres.forEach((c, k) => { if (dist(p, c) < dist(p, centres[j])) j = k; });
      g[j].s = g[j].s.map((v, i) => v + p[i]); g[j].n++;
    }
    centres = g.map((x, k) => x.n ? x.s.map(v => v / x.n) : centres[k]);
  }
  return centres;
}

EN HEXADÉCIMAL

const hex = c => '#' + c.map(v => Math.round(v).toString(16).padStart(2, '0')).join('');