モチベ

背景が変わるときにその上の画像の文字の色を毎回指定するわけにはいかないので、自動化したい.

作戦

画像の主要な色を抽出する (by ColorThief)
主要な色の補色計算 or 明るさに応じて2択の色を選択する.

最終結果

sarutabiko

sarutabiko 2023/05/28

画像の主要な色を計算/抽出するのはColorThiefで.
また同様に貼られているrgbToHexも使用.

  const rgbToHex = (r, g, b) =>
    "#" +
    [r, g, b]
      .map((x) => {
        const hex = x.toString(16);
        return hex.length === 1 ? "0" + hex : hex;
      })
      .join("");

本編処理

    const colorThief = new ColorThief();
    const img: any = document.querySelector(".imageslider");

    if (img?.complete) {
      console.log(rgbToHex(...colorThief.getColor(img)));
    }

Installは方法は下記のGetStartedから

sarutabiko 2023/05/28

次に補色を計算する方法はStackoverflowを少し改変.

https://stackoverflow.com/a/35970186

元の計算から白黒判定を若干下げて100にしている


  function padZero(str, len = 2) {
    len = len || 2;
    var zeros = new Array(len).join("0");
    return (zeros + str).slice(-len);
  }

  function invertColor(hex, bw = { dark: null, blight: null }) {
    if (hex.indexOf("#") === 0) {
      hex = hex.slice(1);
    }
    // convert 3-digit hex to 6-digits.
    if (hex.length === 3) {
      hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
    }
    if (hex.length !== 6) {
      throw new Error("Invalid HEX color.");
    }
    let r = parseInt(hex.slice(0, 2), 16),
      g = parseInt(hex.slice(2, 4), 16),
      b = parseInt(hex.slice(4, 6), 16);
    if (bw.dark && bw.blight) {
      // https://stackoverflow.com/a/3943023/112731
      return r * 0.299 + g * 0.587 + b * 0.114 > 100 ? bw.dark : bw.blight;
    }
    // invert color components
    let rStr = (255 - r).toString(16);
    let gStr = (255 - g).toString(16);
    let bStr = (255 - b).toString(16);
    // pad each with zeros and return
    return "#" + padZero(rStr) + padZero(gStr) + padZero(bStr);
  }

sarutabiko 2023/05/28

最終的な処理は下記のような形.

 const colorThief = new ColorThief();
    const img: any = document.querySelector(".imageslider");

    if (img?.complete) {
      console.log(
        invertColor(rgbToHex(...colorThief.getColor(img)), {
          dark: "#cd2525",
          blight: "#ffffff",
        })
      );
    }
  };

sarutabiko 2023/05/28

結構いい感じにおしゃれに色を選択してくれている.

このスクラップは2023/05/28にクローズされました