欢迎使用 c-avatar-synthesis

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

安装

// npm安装方式，插件市场导入无需执行此命令。插件市场导入地址：https://ext.dcloud.net.cn/plugin?id=22320
npm install 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');
			}
		}
	}
</script>

API

Props

|参数|说明|类型|默认值|可选值| |--|--|--|--|--| |list|头像列表|Array|[]|-| |keyName|头像列表，头像url字段的键名|String|""（空字符串取item）|-| |canvasId|canvas标签的canvas-id属性|String|canvas|-| |gap|单位px；群头像，头像间的总间距|Number|12|-| |size|单位px；canvas的宽高|Number|300|-| |params|uni.canvasToTempFilePath的参数|Object|{fileType: "jpg", quality: 0.7}|-|

Events

|事件名|说明|回调参数| |--|--|--| |success|图片合成成功回调|res: {"errMsg": "canvasToTempFilePath:ok", "tempFilePath": "/a.jpg"}| |fail|图片合成失败回调|err|