更新记录

1.0.0(2024-04-11)

图片亮度调节,输出图片格式为base64


平台兼容性

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

图片亮度调节插件使用说明

1.安装dom-to-image

npm i dom-to-image

2.插件使用代码示例

<template>
    <qiqi-imageBrightness :src="imgUrl" ref="d2" id="imgRef"></qiqi-imageBrightness>
    <slider style="width: 300px;" :min="-100" :max="100" @changing="sliderChange"
        :value="silderNum" />
    <button @click="canvas.saveLightImg">测试</button>
</template>
<script module="canvas" lang="renderjs">
    import domtoimage from 'dom-to-image';
    export default {
        methods: {
            saveLightImg(e, ownerVm) {
                const imgObj = document.getElementById("imgRef")
                domtoimage.toPng(imgObj).then(res => {
                    console.log(res)
                })
            }
        }
    }
</script>
<script>
    export default {
        data() {
            return {
                silderNum: 0,
                imgUrl: 'https://bkimg.cdn.bcebos.com/pic/a8014c086e061d950a7bea2564b81dd162d9f2d35cd3?x-bce-process=image/format,f_auto/quality,Q_70/resize,m_lfit,limit_1,w_536'
            }
        },
        methods: {
            sliderChange(event) {
                this.silderNum = event.detail.value;
                this.$refs.d2.onSliderChange(this.silderNum)
            }
        }
    }
</script>

3.使用效果预览

欢迎咨询交流

微信号:qiqi_v520

公众号:'撸毛党'

隐私、权限声明

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

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

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

许可协议

MIT协议

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