Блог

Я пытаюсь импортировать color-thief из NPM (https://github.com/lokesh/color-thief ) вот так:

 import ColorThief from 'colorthief'
  

Но когда я вызываю new ColorThief() , он возвращает что-то, что не является конструктором. console.log(ColorThief) просто показывает _proto_ , что я не понимаю.

Как правильно использовать color-thief пакет?

Обязательно установите null2/color-thief , который является ответвлением исходного проекта, который вы связали, что позволяет импортировать пакет.

Например, вы могли бы использовать его в App.vue следующим образом:

1. Установите color-thief с:

 npm install -S color-thief
  

2. В App.vue шаблоне создайте <img> тег, который загружает изображение, которое вы хотите проанализировать. Добавьте ref в <img> , чтобы мы могли ссылаться на него на следующем шаге.

 <img ref="myImg" src="...">
  

3. Импортируйте color-thief в свой скрипт, создайте экземпляр ColorThief , а затем используйте его для getPalette() на <img> :

 // App.vue
<script>
import ColorThief from 'color-thief'

export default {
  mounted() {
    this.$nextTick(() => {
      const colorThief = new ColorThief()
      const palette = colorThief.getPalette(this.$refs.myImg)
      /* do something with `palette` RGB array */
    })
  }
}
</script>
  

ДЕМОНСТРАЦИЯ