如何在vuejs上下文中使用色贼

Question

我试图像这样从NPM ( color-thief )导入color-thief (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

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

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

演示