note/2.B端/文字颜色自适应背景色.md

文字颜色自适应背景图片

• 利用canvas获取图片像素矩阵

  const image = new Image();
  image.src = require('./assets/img/bg13.png');
  const canvas = document.getElementById("canvas");
  const context = canvas.getContext("2d");
  image.onload = () => {
      context.drawImage(image, 0, 0); //获取像素矩阵
      const data = context.getImageData(0, 0, canvas.width, canvas.height).data;
  }
  

• 根据像素计算主色调

  1. 取平均数方式,优点是简单,缺点是可能不太准

     let sr = 0,
         sg = 0,
         sb = 0,
         sum = 0;
     const data = context.getImageData(0, 0, canvas.width, canvas.height).data;
     for (let i = 0; i < data.length; i += 4) {
         if (data[i + 3] >= 255) {
             sum++;
             sr += data[i];
             sg += data[i + 1];
             sb += data[i + 2];
         }
     }
     const r = sr / sum,
           g = sg / sum,
           b = sb / sum;
     

  2. 中位数方式

• 判断颜色色系 ( 深色系OR浅色系 )，给页面body添加样式

  const level = 0.299 * r + 0.587 * g + 0.114 * b;
  if (level < 192) {
      document.getElementsByTagName("body")[0].className = 'style-dark';
  } else {
      document.getElementsByTagName("body")[0].className = 'style-wihte';
  }
  

• CSS样式

    .style-dark .el-table *, .style-dark .el-tabs *,
    .style-dark .el-input__inner,
    .style-dark h1, .style-dark h2, .style-dark small, .style-dark span, .style-dark div *{
       color: white;
    }
  
    .style-dark .el-input__inner * {
       background: none !important;
    }
  
    .style-dark .el-button--default {
        background:  url(assets/img/bg13.png);
    }
  
    .style-dark .el-dialog *{
       color: white !important;
    }