分享一个从图片中提取色卡的实现

牛老师讲GIS

于 2024-10-13 17:57:16 发布

阅读量1.1k

点赞数 31

分类专栏： GIS加油站文章标签： canvas 提取颜色

本文链接：https://blog.csdn.net/GISShiXiSheng/article/details/142901576

版权

GIS加油站专栏收录该内容

336 篇文章

订阅专栏

概述

最近在做“在线地图样式配置”的功能的时候，发现百度地图有个功能时上传一张图片，从图片中提取颜色并进行配图。本文就简单实现一下如何从图片中提取色卡。

效果

实现

实现思路

通过canvasdrawImage绘制图片，并通过getImageData获取颜色，根据颜色的距离对颜色进行分组，分组后的结果进行求平均。

实现代码

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="canvas"></canvas>

    <script>
      const canvas = document.querySelector("#canvas");
      const { offsetWidth, offsetHeight } = document.body;
      canvas.width = offsetWidth * 0.8;
      canvas.height = offsetHeight * 0.8;
      const ctx = canvas.getContext("2d");
      
      /**
       * 计算颜色距离，判断是否为相近颜色
       * @param {Array} color1
       * @param {Array} color2
       */
      function colorDistance([r1, g1, b1], [r2, g2, b2]) {
        const rmean = (r1 + r2) / 2;
        const r = r1 - r2;
        const g = g1 - g2;
        const b = b1 - b2;
        return Math.sqrt(
          (2 + rmean / 256) * (r * r) +
            4 * (g * g) +
            (2 + (255 - rmean) / 256) * (b * b)
        );
      }

      const img = new Image();
      img.src = "./earth.jpg";
      let maxSize = 400
      img.onload = () => {
        let { width, height } = img;
        // 进行等比缩放
        if(width > height && width > maxSize) {
          const ratio = maxSize / width
          width = maxSize
          height = ratio * height
        }
        if(height > width && height > maxSize) {
          const ratio = maxSize / height
          height = maxSize
          width = ratio * width
        }
        // 绘制图片
        ctx.drawImage(img, 0, 0, width, height);
        
        const data = ctx.getImageData(0, 0, width, height).data;
        
        const dict = {};
        
        // 获取分组颜色
        const getKey = (color2) => {
          const colors = Object.keys(dict).map((c) => c.split(",").map(Number));
          if (colors.length === 0) return color2.join(",");
          const delt = 88; // 分组范围
          let res = color2.join(",");
          for (let i = 0; i < colors.length; i++) {
            const color = colors[i];
            const dis = colorDistance(color, color2);
            if (dis < delt) {
              res = color.join(",");
              break;
            }
          }
          return res;
        };
        
        // 将颜色进行分组
        for (let i = 0; i < data.length; i += 4) {
          const r = data[i];
          const g = data[i + 1];
          const b = data[i + 2];
          const ckey = getKey([r, g, b]);
          if (!dict[ckey]) dict[ckey] = [];
          dict[ckey].push([r, g, b]);
        }
        
        // 将颜色按照数量进行排序
        const result = Object.keys(dict)
          .map((c) => {
            return {
              key: c,
              colors: dict[c],
            };
          })
          .sort((a, b) => b.colors.length - a.colors.length);
        
        // 取相近色的颜色平均值   
        for (let i = 0; i < result.length; i++) {
          const { colors } = result[i];
          let r = 0,
            g = 0,
            b = 0;
          for (let j = 0; j < colors.length; j++) {
            const [r1, g1, b1] = colors[j];
            r += r1;
            g += g1;
            b += b1;
          }
          r = Math.round(r / colors.length);
          g = Math.round(g / colors.length);
          b = Math.round(b / colors.length);
          result[i]["key"] = [r, g, b].join(",");
        }
        // 根据颜色亮度进行排序
        const colorss = result.map(({ key }) => key).sort((a, b) => {
          const [ra, ga, ba] = a.split(",").map(Number)
          const [rb, gb, bb] = b.split(",").map(Number)
          const la = ra * 0.299 + ga * 0.587 + ba *0.114
          const lb = rb * 0.299 + gb * 0.587 + bb *0.114
          return lb - la
        });
        // 渲染颜色
        const h = 20;
        for (let i = 0; i < colorss.length; i++) {
          ctx.fillStyle = `rgb(${colorss[i]})`;
          ctx.strokeStyle = `#fff`;
          const y = i * h + (height + 20);
          ctx.fillRect(0, y, 30, h);
          ctx.strokeRect(0, y, 30, h);
        }
      };
    </script>
  </body>
</html>