更新记录

1.0.1（2025-04-10） 下载此版本

邀请生成海报支持分享和保存本地相册支持支付宝和微信

平台兼容性

导入

import Poster from '../../../components/Poster/Poster.vue'

在components中声明

export default {
    components: {
        Poster
    }
}

在template中使用

<poster ref="poster" :list="list" background-color="#FFF" :width="750" :height="1334"
            @on-success="posterSuccess" @on-error="posterError"></poster>

list参数说明

代码示例

<template>
    <view>
        <button @click="startPic">生成</button>

        <!-- 生成图片 width和height调整生成图片大小-->
        <poster ref="posterComponent" :list="list" background-color="#FFF" :width="750" :height="1000"
            @on-success="posterSuccess" @on-error="posterError"></poster>

    </view>
</template>

<script setup>
    import Poster from '@/wxcomponents/tangyuan-posterxiao/tangyuan-posterxiao.vue'
    import {
        ref
    } from "vue"
    const posterComponent = ref(null)

    const posterSuccess = (url) => {
        console.log("成功的回调生成canvas图片", url);
        uni.showShareImageMenu({
            path: url,
            fail(err) {
                console.log(err);
            }
        })
    }
    const posterError = () => {
        console.log("失败回调");
    }
    // 本地图片需要加例子
    // {
    //      type: 'image',
    //      
    //      path: '本地路径',//直接/static/...
    //      x: 0,
    //      y: 0,
    //      net:"local"
    //      width: 750,
    //      height: 750
    //  }

    let list = [{
            type: 'image',
            // path替换成你自己的图片，注意需要在小程序开发设置中配置域名
            path: 'https://img1.baidu.com/it/u=3591704334,1673125027&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067',
            x: 0,
            y: 0,
            width: 750,
            height: 750
        },

    ];
    const startPic = () => {

        posterComponent.value.generateImg()

    }
</script>