识别图片颜色切换文字颜色

最新推荐文章于 2024-05-13 09:32:52 发布

翘板

最新推荐文章于 2024-05-13 09:32:52 发布

阅读量321

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/m0_61950846/article/details/127924525

版权

1.安装npm i rgbaster -S

2.引用import rgbaster from 'rgbaster'

3.html

<div class="text" :style="{ color: color }">这是要根据背景进行变换的颜色！！！这是要根据背景进行变换的颜色！！！这是要根据背景进行变换的颜色！！！</div>
      <img :src="imgSrc" alt="">
      <div @click="changeIMge">图片进行切换</div>

4.data

color: '',
      imgSrc: 'https://ts1.cn.mm.bing.net/th/id/R-C.e436ab870087ab976c6f132ef8c83085?rik=UTglI%2fo9nrx68w&riu=http%3a%2f%2fpic.sucaibar.com%2fpic%2f201307%2f19%2f9ac1babed4.jpg&ehk=EbswiJw3CBIb8eIxxEJsOP5yPatdc42Ge68iIMTJMbk%3d&risl=&pid=ImgRaw&r=0'

5.monted

mounted() {
    let result = rgbaster(this.imgSrc)
    result.then((res) => {
      var newArry = res[0].color.split('(');
      newArry = newArry[1].split(')');
      newArry = newArry[0].split(',');
      var number = 0;
      newArry.forEach((item) => {
        number += item * 1;
      });
      if (number / 3 > 200) {
        //浅色背景，设置为黑字
        console.log('设置为黑字')
        this.color = '#000'
      } else {

        //深色背景，设置为白字
        console.log('设置为白字')

        this.color = '#fff'
      }
    })
  },

6.切换的动作，就大功完成了

 changeIMge(){
      this.imgSrc='https://ts1.cn.mm.bing.net/th/id/R-C.9bd58a990628d81fc838267a9d2d4aa4?rik=CdhH0r4EiL2R6Q&riu=http%3a%2f%2fpic.ntimg.cn%2ffile%2f20170701%2f6999695_110407582035_2.jpg&ehk=5Vf8EYyO7IBR7do21anXPrrgk98HThE8c8k74qsFbbM%3d&risl=&pid=ImgRaw&r=0'
      let result = rgbaster(this.imgSrc)
    result.then((res) => {
      var newArry = res[0].color.split('(');
      newArry = newArry[1].split(')');
      newArry = newArry[0].split(',');
      var number = 0;
      newArry.forEach((item) => {
        number += item * 1;
      });
      if (number / 3 > 200) {
        //浅色背景，设置为黑字
        console.log('设置为黑字')
        this.color = '#000'
      } else {
        //深色背景，设置为白字
        console.log('设置为白字')

        this.color = '#fff'
      }
    })
    },