更新记录

0.11（2023-04-01）

组件本来叫 getColort ，发布插件一定要改名和id一样，无语了，请大家自己统一组件的名字

0.1（2023-04-01）

有时候文字在图片之上，就要实时判断图片的明暗度调整文字颜色，避免看不清

演示文件是 test.vue，使用请用easycom组件

使用方法如下：

引入组件及放置画布，canvas放在组件内会无法识别：

<getColor ref="getColor" @picBrightValue="picBrightValue"></getColor>
<canvas canvas-id="myCanvas" style="position: fixed; top: -10000px;"></canvas>

在夫组件data内新增：

bright : false

夫组建methods内增加：

picBrightValue(res) {
    // console.log('this.bright', res)
    this.bright = res
}

在图片地址被正确赋值以后调用

this.$refs.getColor.getColor()

如果你的图片是动态赋值，用watch监听

watch : {
    shop_pic (newVal, oldVal) {
        // console.log('newVal', newVal)
        if(newVal != '') {
            this.$refs.getColor.getColor(newVal)
        }
    }
}

最后就可以靠bright来识别图片的明暗度后赋值不同的文字颜色了

平台兼容性

有时候文字在图片之上，就要实时判断图片的明暗度调整文字颜色，避免看不清

演示文件是 test.vue，使用请用easycom组件

使用方法如下：

引入组件及放置画布，canvas放在组件内会无法识别：

<getColor ref="getColor" @picBrightValue="picBrightValue"></getColor>
<canvas canvas-id="myCanvas" style="position: fixed; top: -10000px;"></canvas>

在夫组件data内新增：

bright : false

夫组建methods内增加：

picBrightValue(res) {
    // console.log('this.bright', res)
    this.bright = res
}

在图片地址被正确赋值以后调用

this.$refs.getColor.getColor()

如果你的图片是动态赋值，用watch监听

watch : {
    shop_pic (newVal, oldVal) {
        // console.log('newVal', newVal)
        if(newVal != '') {
            this.$refs.getColor.getColor(newVal)
        }
    }
}

最后就可以靠bright来识别图片的明暗度后赋值不同的文字颜色了