imageColor/index.html at main · Moveharder/imageColor · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover"
    />
    <title>寻找主色调</title>
    <style>
      *,
      html {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }
      body {
        padding-top: 100px;
        overflow: scroll;
        text-align: center;
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
      }
      #graphy_canvas {
        border: solid 2px purple;
        background-color: #000;
      }
      img {
        width: 400px;
      }
      #color_des {
        padding: 40px;
        border-radius: 8px;
        line-height: 30px;
        margin-top: 10px;
        position: fixed;
        bottom: 0;
        right: 0;
      }
    </style>
  </head>
  <body>
    <img id="sourceimg" src="" alt="" />
    <h3 id="color_des"></h3>
    <select id="imgs"></select>
    <br />
    <canvas id="graphy_canvas"></canvas>
    <br />
    <br />
  </body>
  <script type="module">
    import ImageColor from "./index.js";
    let IC = new ImageColor();
    let imgs = [
      "./img4.png",
      "./img2.png",
      "./img1.png",
      "./img3.png",
      "./img5.jpg",
      "./img6.jpeg",
      "./img7.png",
      "./img8.jpeg",
      "https://thirdwx.qlogo.cn/mmopen/vi_32/17uQMj28kzyibbO7yich0hkX4CmzDqzrFQP8cbzj33cPNWsJ1BNyodtC8U8HDC3Edibzjj2Sz02eKp8sLM1C2OAxg/132",
    ];
    let sourceimgDom = document.querySelector("#sourceimg");

    imgSelectRender();

    analyst(imgs[0]);
    sourceimgDom.src = imgs[0];

    function imgSelectRender() {
      let selector = document.querySelector("#imgs");
      let frag = document.createDocumentFragment();
      imgs.map((item, index) => {
        let option = document.createElement("option");
        option.value = item;
        option.innerText = `图片#${index + 1}`;
        frag.appendChild(option);
      });
      selector.appendChild(frag);

      selector.addEventListener("change", (e) => {
        let value = e.target.value;
        sourceimgDom.src = value;
        analyst(value);
      });
    }

    function analyst(val) {
      IC.analizeImage({
        id: "mycanvas",
        url: val,
        frequency: 20,
      })
        .then((res) => {
          const { primary, colors, pixels, imageInfo } = res;
          console.log("主题色：", primary);
          console.log("三种不同亮度的颜色：", colors);
          console.log("所有像素", pixels);
          console.log("图片信息：", imageInfo);

          renderColors(primary, colors);

          // 执行该任务的话-如果响应速度会比较慢的话，可以延迟渲染，保证当前页面渲染流畅
          setTimeout(() => {
            IC.showGC({ gcid: "graphy_canvas" });

            // IC.saveGCImage('色谱.png'); //需要先调用 showGC
          }, 0);
        })
        .catch((err) => {
          console.error("failed: ", err);
        });
    }

    function renderColors(primary = [], colors = []) {
      let html = `<div style="text-align:left;color:rgb(${primary})">主题色：rgb(${primary})</div> <hr/>`;
      let maxYuvColor = IC.getMaxColor();
      for (let key in colors) {
        let { name, color, yuvPercent } = colors[key];
        html += `<div style="text-align:left;color:rgb(${color})"> ${name}: rgb(${
          color || "not found"
        }) ${yuvPercent}% </div>`;
      }

      let resDom = document.querySelector("#color_des");
      let boxShadow = `rgb(${maxYuvColor.color}) 0 0 20px inset,rgb(${maxYuvColor.color}) -1px -1px 150px inset`;
      resDom.innerHTML = html;
      resDom.style.backgroundColor = `rgb(${colors.soft.contrastColor})`;
      resDom.style.boxShadow = boxShadow;
      document.body.style.backgroundColor = `rgb(${maxYuvColor.color})`;

      sourceimgDom.style.boxShadow = boxShadow;
    }
  </script>
</html>