js识别图片主色调

最新推荐文章于 2024-05-13 10:48:39 发布

Wombat-

最新推荐文章于 2024-05-13 10:48:39 发布

阅读量924

点赞数

分类专栏： css 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/haluodepaopao/article/details/125390289

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body style="display: inline-block;">
  <div style='display: inline-block;width:200px;height: 200px;' id='span'></div>
  <div>
    <img id="imgs" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp09%2F21042G41J950I-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658384093&t=b1733c905c018366f6ae058ba3b11186" alt="" height="400">
  </div>
  <script>
	  var img = document.getElementById('imgs');
    var span = document.getElementById('span');

    function getImageColor(img) {
      var canvas = document.createElement('canvas')
      canvas.width = img.width;
      canvas.height = img.height;

      var context = canvas.getContext("2d");
      img.crossOrigin = "Anonymous"
      context.drawImage(img, 0, 0, canvas.width, canvas.height);

      // 获取像素数据
      var data = context.getImageData(0, 0, img.width, img.height).data;
      console.log(data)
      var r = 1,
        g = 1,
        b = 1;
      // 取所有像素的平均值
      for (var row = 0; row < img.height; row++) {
        for (var col = 0; col < img.width; col++) {
          // console.log(data[((img.width * row) + col) * 4])
          if (row == 0) {
            r += data[((img.width * row) + col)];
            g += data[((img.width * row) + col) + 1];
            b += data[((img.width * row) + col) + 2];
          } else {
            r += data[((img.width * row) + col) * 4];
            g += data[((img.width * row) + col) * 4 + 1];
            b += data[((img.width * row) + col) * 4 + 2];
          }
        }
      }

      console.log(r, g, b)
      // 求取平均值
      r /= (img.width * img.height);
      g /= (img.width * img.height);
      b /= (img.width * img.height);

      // 将最终的值取整
      r = Math.round(r);
      g = Math.round(g);
      b = Math.round(b);
      console.log(r, g, b)

      return [r, g, b]
    }

    function rgbtohsl(rgb, opactiy) {
      r = rgb[0] / 255;
      g = rgb[1] / 255;
      b = rgb[2] / 255;

      var min = Math.min(r, g, b);
      var max = Math.max(r, g, b);
      var l = (min + max) / 2;
      var difference = max - min;
      var h, s, l;
      if (max == min) {
        h = 0;
        s = 0;
      } else {
        s = l > 0.5 ? difference / (2.0 - max - min) : difference / (max + min);
        switch (max) {
          case r:
            h = (g - b) / difference + (g < b ? 6 : 0);
            break;
          case g:
            h = 2.0 + (b - r) / difference;
            break;
          case b:
            h = 4.0 + (r - g) / difference;
            break;
        }
        h = Math.round(h * 60);
      }
      s = Math.round(s * 100 * 1.5)+ '%'; //转换成百分比的形式
      l = Math.round(l * 100 * 0.8)+ '%';
      const str = "hsl(" + h + "," + s + "," + l + "," + opactiy +")";
      console.log('str', str)
      return str
    }
    img.onload = function () {
      const rgb = getImageColor(img)
      const hsl = rgbtohsl(rgb, 0.2)
      span.style.background = hsl
      span.innerText = "下方图片主色调为：" + hsl
    }

  </script>
</body>
</html>

在这里插入图片描述