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

概述

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

效果

实现

实现思路

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

实现代码

html 复制代码
<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>
相关推荐
_lucas3 天前
用canvas做个场景编辑器
前端·javascript·canvas
red润4 天前
浏览器离屏渲染 vs. Electron离屏渲染——核心区别与应用场景
前端·electron·canvas
八了个戒5 天前
「数据可视化 D3系列」入门第十章:饼图绘制详解与实现
前端·javascript·信息可视化·数据可视化·canvas·d3
八了个戒6 天前
「数据可视化 D3系列」入门第六章:比例尺的使用
前端·javascript·信息可视化·数据可视化·canvas
Jimmy6 天前
H5 Canvas 中 globalCompositeOperation 的理解和应用
前端·javascript·canvas
普兰店拉马努金7 天前
【Canvas与旗帜】标准英国米字旗
canvas·旗帜·英国·米字旗
前端_yu小白7 天前
html,css,js实现电子点名绘制和下载
javascript·canvas·电子签名·js图片生成
糖墨夕9 天前
【3】Threejs环境光、点光源、聚光灯等常见光源类型对比
前端·three.js·canvas
八了个戒9 天前
「数据可视化 D3系列」入门第七章:坐标轴的使用
前端·javascript·数据可视化·canvas·d3