Как использовать Color-Thief в контексте Vuejs

Question

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

import ColorThief from 'colorthief'

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

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

Answer 1

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

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

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

npm install -S color-thief

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

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

Импортируйте 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>