如何在 vuejs 上下文中使用颜色小偷答案

【问题标题】：how to use color-thief in a vuejs context如何在 vuejs 上下文中使用颜色小偷
【发布时间】：2022-04-30 05:06:55
【问题描述】：

我正在尝试从 NPM (https://github.com/lokesh/color-thief) 导入 color-thief，如下所示：

import ColorThief from 'colorthief'

但是当我调用new ColorThief() 时，它返回的不是构造函数。 console.log(ColorThief) 只是显示了一个我不明白的_proto_。

如何正确使用color-thief包？

【问题讨论】：

标签： vue.js npm configuration vuejs2 package

【解决方案1】：

确保安装null2/color-thief，它是您链接的原始项目的一个分支，允许导入包。

例如，您可以在App.vue 中使用它，如下所示：

安装color-thief：

npm install -S color-thief

在App.vue 的模板中，创建一个<img> 标记以加载您要分析的图像。将ref 添加到<img>，以便我们在下一步中引用它。

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

在脚本中导入color-thief，创建ColorThief的实例，然后在<img>上使用getPalette()：

// 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>

demo

【讨论】：

@prius 我建议针对您的问题发布两个单独的问题，以便熟悉该主题的人可以回答。您应该提供问题重现的链接。如果可以的话，我会插话的。