返回文章
ARTICLE
识别图片主色
个人做的工具类项目，会不断补充新的前端可用工具、文档、新技术等 原理是将图片在 canvas 上绘制成 1px * 1px 大小的图片，然后利用 canvas 的 getImageData() 方法获取到 rbga 格式的颜色
识别图片主色
个人做的工具类项目，会不断补充新的前端可用工具、文档、新技术等
获取图片主色
原理是将图片在 canvas 上绘制成 1px * 1px 大小的图片，然后利用 canvas 的 getImageData() 方法获取到 rbga 格式的颜色
<template>
<UploadImgShow v-model="src" />
<div class="loading-img"><img ref="imgRef" :src="src" class="img-test" @load="imgLoaded" /></div>
<div :style="{ background: color }" class="show-color">
<span>{{ `图片主色: ${color}` }}</span>
<a-button type="primary" class="ml-20" @click="copyText(color)">复制</a-button>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { copyText } from '@/common/utils';
import UploadImgShow from './UploadImgShow.vue';
const imgRef = ref();
const src = ref('src/images/3.jpg');
const color = ref('#fff');
const imgLoaded = () => {
const canvas = new OffscreenCanvas(1, 1);
const ctx = canvas.getContext('2d');
ctx.drawImage(imgRef.value, 0, 0, 1, 1);
const { data } = ctx.getImageData(0, 0, 1, 1);
color.value = `rgba(${data.join(',')})`;
};
</script>