携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第19天，点击查看活动详情
最近公司vue项目中接到一个新需求，在页面中判断用户上传的健康码截图的颜色是否绿色，进而判断其健康码是否有效、正常，那么实现思路就是通过获取图片的主色调，来与正常的绿色调对比，两者相同或进阶时，我们就可以判断其时正常阴性的健康码。其实大部分大厂的AI识图已具备了这个API接口，但是用大厂的不是要money吗，于是开始找轮子，偶然发现了colorthief这个开源插件，特写了一个demo，记录一下整个过程。
colorthief是基于JavaScript和canvas来用于提取图片的主要颜色或者代表性颜色调色板的工具：官网传送门
首先在项目里，使用npm安装一下colorthief的依赖。
npm i --save colorthief
这个插件使用比较简单，其使用步骤时：
- 首先在vue的template结构中，定义一个img标签，用来存放上传的图片，本例中直接使用:src绑定一个bannerimg的url地址。在img标签上，添加@load事件loadImage。
- 在script中使用import方法导入colorthief插件。
- loadImage方法中，首先用document.querySelector方法，拿到img的DOM。
- 实例化ColorThief对象，使用colorthief.getPalette(domImg)[0]，即可获取到图片的主色调，主色调会以一个红色、绿色和蓝色值的三个整数的数组返回。
- 将rgb的数组通过函数，转换成16进制颜色代码；
- 比较颜色代码与绿色基准代码是否相近，相近的话，则说明健康码正常。
以下是获取主色调的代码：
<template>
<div class="bannerd">
<div class="bannerview">
<img id="code" class="imgbg" :src="bannerimg" @load="loadImage" alt="" />
</div>
</div>
</template>
<script>
//npm i --save colorthief
import ColorThief from "colorthief";
export default {
name: "bannerdemo",
data() {
return {
bannerimg: require("./assets/11.png"),
}
},
methods: {
onChange(index) {
this.bannerimg = this.bigimglist[index].img;
},
loadImage() {
let domImg = document.querySelector('#code');
let colorthief = new ColorThief();
this.bacolor = colorthief.getPalette(domImg)[0];
console.log(this.bacolor); //主颜色
},
}
}
</script>
