如何在vuejs上下文中使用color-thief

Question

我正在尝试像这样从NPM（https://github.com/lokesh/color-thief）导入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

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

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

1. 在脚本中导入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>