更新记录

1.0.0（2025-02-25） 下载此版本

初次发布

平台兼容性

欢迎使用 c-avatar-synthesis

注意事项 微信小程序需要配置downloadFile合法域名，具体操作方法：https://mp.weixin.qq.com打开并登录 --->管理 --->开发管理 --->服务器域名 --->修改

安装

// npm安装方式，插件市场导入无需执行此命令。插件市场导入地址：https://ext.dcloud.net.cn/plugin?id=22320
npm i c-avatar-synthesis

使用方法

<template>
    <view class="box">
        <!-- 方式一 -->
        <avatar-synthesis
            ref="avatarSynthesis1"
            :list="avatarList1"
            @success="onSuccess1"
        />
        <!-- 方式二 -->
        <avatar-synthesis
            ref="avatarSynthesis2"
            canvasId="canvas2"
            keyName="img"
            :list="avatarList2"
            @success="onSuccess2"
        ></avatar-synthesis>
    </view>
</template>

<script>
    // 以下导入方式按照安装方式导入，二选一
    import avatarSynthesis from '@/components/c-avatar-synthesis/c-avatar-synthesis.vue';       // 插件市场导入方法
    import avatarSynthesis from "@/node_modules/c-avatar-synthesis/c-avatar-synthesis.vue";     // npm导入方法
    export default {
        components: {
            avatarSynthesis
        },
        data() {
            return {
                avatarList1: [],
                avatarList2: [
                    {
                        img: "https://uy.wzznft.com/i/2025/02/25/fhivxs.jpg"
                    }, {
                        img: "https://uy.wzznft.com/i/2025/02/25/fhiufa.jpg"
                    }, {
                        img: "https://uy.wzznft.com/i/2025/02/25/fhj3ui.jpg"
                    }, {
                        img: "https://uy.wzznft.com/i/2025/02/25/fhj147.jpg"
                    }, {
                        img: "https://uy.wzznft.com/i/2025/02/25/fhj58q.jpg"
                    }, {
                        img: "https://uy.wzznft.com/i/2025/02/25/fhj1tw.jpg"
                    }
                ]
            }
        },
        onLoad() {
            // 模仿接口返回
            this.getAvatarList();
        },
        onReady() {
            // 开始绘画
            this.$refs.avatarSynthesis2.draw();
        },
        methods: {
            // 模仿接口返回数据
            getAvatarList() {
                setTimeout(() => {
                    this.avatarList1 = [
                        "https://uy.wzznft.com/i/2025/02/25/fhixcl.jpg",
                        "https://uy.wzznft.com/i/2025/02/25/fhisx0.jpg"
                    ]
                    this.$nextTick(function() {
                        this.$refs.avatarSynthesis1.draw();
                    })
                }, 1000)
            },
            onSuccess1(res) {
                console.log(res.tempFilePath, '11111111');
            },
            onSuccess2(res) {
                console.log(res.tempFilePath, '22222222');
            }
        }
    }

API

Props

Events