更新记录

1.0.0（2025-06-26） 下载此版本

初次发布

平台兼容性

uni-app

其他

欢迎使用 c-poster

npm下载量：

注意：微信小程序需要添加download域名白名单

安装

// npm安装方式，插件市场导入无需执行此命令。插件市场导入地址：
npm install c-poster

使用方法

<template>
    <view class="poster">
        <c-poster
            ref="cPoster"
            :canvas-style="poster.style"
            :views="poster.views"
            @success="onSuccess"
        />
    </view>
</template>

<script>
// 以下导入方式按照安装方式导入，二选一
// 插件市场导入方法：无需引入，可直接使用
// npm导入方法如下：
import cPoster from "c-poster/components/c-poster/c-poster.vue";
export default {
    // npm导入需要添加components，插件市场导入不需要
    components: {
        cPoster
    },
    data() {
        return {
            poster: {
                style: {
                    width: "200px",
                    height: "300px"
                },
                views: [
                    {
                        type: "image",
                        path: "https://img.alicdn.com/bao/uploaded/i3/2367364052/O1CN01EzU66N1fnrf4MBEwh_!!0-item_pic.jpg_460x460q90.jpg_.webp",
                        x: 0,
                        y: 0,
                        width: 200,
                        height: 200
                    },
                    {
                        type: "text",
                        content: "测试内容",
                        x: 10,
                        y: 210
                    }
                ]
            }
        }
    },
    onReady() {
        // 模仿接口请求
        setTimeout(() => {
            this.$refs.cPoster.init();
        }, 200)
    },
    methods: {
        onSuccess(filePath) {
            // filePath：uni.canvasToTempFilePath成功回调返回的文件路径
        }
    }
}
</script>

API

Props

views，type为image的参数说明

views，type为text的参数说明

Events