更新记录

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来识别图片的明暗度后赋值不同的文字颜色了


平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
× × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

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

演示文件是 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来识别图片的明暗度后赋值不同的文字颜色了

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问