更新记录

1.0.0（2025-03-28） 下载此版本

重构代码解决页面内容组件切换后，内容组件该子组件的未知报错，已增加扩展参数。

平台兼容性

uni-app

简介：

• 已测试适用于Vue2、Vue3版本的uniapp微信小程序。
• 因官方未知兼容问题，所以使用type2D和Vue2写法才可实现。
• 原理是使用原图片信息绘制到canvas后分析和修改像素数据并输出临时图。
• 组件简单易用，可参考以下例子，有问题请评论区友好提问，感谢！

参数说明：

基本使用：

<template>
    <view class="content">
        <text class="title">修改前</text>
        <image class="logo" :src="imgUrl" />

        <text class="title">修改后</text>
        <ColorIcon :iconUrl="imgUrl" targetHex="0xFF0060AA" :cssWidth="100" :cssHeight="100" />
        <ColorIcon :iconUrl="imgUrl" targetHex1="#000000" :cssWidth="100" :cssHeight="100" />
        <ColorIcon :iconUrl="imgUrl" rgba="rgba(252,25,68,1)" :cssWidth="100" :cssHeight="100" />
    </view>
</template>

<script>
    import ColorIcon from '@/components/ColorIcon/ColorIcon.vue'
    export default {
        data() {
            return {
                imgUrl:''//网络地址
            }
        },
        components: {
            ColorIcon
        },
        onLoad() {

        },
        methods: {

        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 100rpx;
        height: 100vh;
        background: springgreen;
        box-sizing: border-box;
    }

    .logo {
        height: 100px;
        width: 100px;
        margin-top: 20rpx;
    }

    .title {
        font-size: 36rpx;
        color: #8f8f94;
        margin: 50rpx 0 20rpx 0;
    }
</style>