更新记录
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来识别图片的明暗度后赋值不同的文字颜色了
平台兼容性
uni-app
Vue2 |
Vue3 |
Chrome |
Safari |
app-vue |
app-nvue |
Android |
iOS |
鸿蒙 |
√ |
- |
- |
- |
- |
- |
- |
- |
- |
微信小程序 |
支付宝小程序 |
抖音小程序 |
百度小程序 |
快手小程序 |
京东小程序 |
鸿蒙元服务 |
QQ小程序 |
飞书小程序 |
快应用-华为 |
快应用-联盟 |
√ |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
有时候文字在图片之上,就要实时判断图片的明暗度调整文字颜色,避免看不清
演示文件是 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来识别图片的明暗度后赋值不同的文字颜色了