image에서 특징적인 색깔의 추출하기 (node-vibrant)

개요

이미지에서 그 이미지의 특징적인 색깔을 추출해서 이미지의 배경색깔로써 사용하고 싶을 때 어떻게 해야 할까

 

node-vibrant라는 라이브러리를 쓰자

https://github.com/Vibrant-Colors/node-vibrant

GitHub - Vibrant-Colors/node-vibrant: 🎨 Extract prominent colors from an image

 

useVibrant.js

import Vibrant from 'node-vibrant'

export const useVibrant = () => {
  const getPaletteData = async (imgUrl) => {
    const image = new Image()
    image.crossOrigin = 'Anonymous'
    image.src = imgUrl
    const paletteData = await Vibrant.from(image).getPalette()
    return paletteData
  }
  return {
    getPaletteData,
  }
}

page.vue

import { useVibrant } from '../../composables/useVibrant'

export default defineComponent({
  setup() {
    const { getPaletteData } = useVibrant()
    onMounted(async () => {
      const sampleImgPath = require('@/assets/images/1046000135.webp')
      const result = await getPaletteData(sampleImgPath)
      console.log(result)
    })
 })

 

result의 출력 결과

 

여기서 한가지 주의해야 할 점은

img는 <img> 태그로써 외부이미지를 참조할 때는 SOP에 위반되지 않기 때문에 딱히 CORS 관련 설정을 안해줘도 되지만 script에서 외부 이미지의 데이터에 접근하려고 하면 브라우저 상에서 다른 origin에 접근하는게 되기때문에 SOP에 어긋나게되서 에러가 나게 될것이다. 그래서 코드를 보면 알지만, 그냥 직접이미지를 다운받아서 asset안에 저장한 이미지를 불러들여서 색깔을 추출중이다.

 

결과