PHPackages                             quansitech/qs-cusposter - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. quansitech/qs-cusposter

ActiveLibrary

quansitech/qs-cusposter
=======================

qscmf cus-poster

v1.2.0(3y ago)040MITJavaScriptPHP >=8

Since Feb 27Pushed 3y ago1 watchersCompare

[ Source](https://github.com/quansitech/qs-cusposter)[ Packagist](https://packagist.org/packages/quansitech/qs-cusposter)[ RSS](/packages/quansitech-qs-cusposter/feed)WikiDiscussions master Synced yesterday

READMEChangelogDependencies (1)Versions (7)Used By (0)

qs-cusform 自定义海报
================

[](#qs-cusform-自定义海报)

可通过拖拉形式让用户零代码定义自己的海报

效果
--

[](#效果)

[![](https://github.com/quansitech/files/raw/master/qs-cusposter-sample.png)](https://github.com/quansitech/files/blob/master/qs-cusposter-sample.png)

安装
--

[](#安装)

```
composer require quansitech/qs-cusposter
```

使用
--

[](#使用)

- 海报设计生成器

通过海报设计工作台，用户可自定义海报的背景图，显示的文字，组合图片，定义动态变量等构建想要的海报效果，保存即可提交海报的json数据

```
// $this->view 为视图对象，一般是Controller类绑定的 view对象
$builder = new \QsCusPoster\CusPosterDesignBuilder\CusPosterDesignBuilder($this->view);
// 和ListBuilder的setNIDByNode方法一样，设置当前高亮的菜单
$builder->setNIDByNode("admin", "poster", "index")
//设置海报数据提交到的接口地址
->setPostUrl(U("/admin/poster/save"))
//是否要启动oss上传模块
->setOss(true)
//设置图片上传地址，如果启动oss，则填写上传策略的获取地址
->setUploadAction(U("/extends/aliyunOss/policyGet"))
//如果要编辑已有的海报，则需要通过这个方法传入海报数据
->setPosterData($posterData)
//添加自定义变量组件，第一个参数为变量键名， 第二个参数为展示名称， 第三个参数是预览用例
->addVarComponent('companyName', '公司名称', '全思科技')
->addVarComponent('companyType', '公司性质', '民营企业')
//生成海报设计生成器页面
->build()
```

- 海报生成器

根据海报数据，生成海报的canvas图片，如果有自定义动态变量，要先设置变量值

```
//传入海报数据，注意是数组格式
$builder = new \QsCusPoster\CusPosterBuilder($posterData);
//假如有使用自定义变量组件，通过该方法来设定变量值
$builder->setVarValue("companyName", "张三")
//设置生成canvas宽度，不设置的话则保持原图的宽度
->setWidth(300)
//设置生成canvas高度，不设置的话则保持原图的高度
->setHeight(300)
->setVarValue("companyType", "民营企业")
->build();
```

- 前端通过js调用海报生成器

跟前面的php生成器接管了所有的生成操作不同，前端js调用则需要自己加载js组件，决定如何生成海报,灵活性更高

```

// 扩展自动将该js映射到/public/cusposter/poster-render.js，如没有特殊改动，则是直接使用该地址即可获取到js文件

    // $posterData可以用 CusPosterBuilder类的genData方法来生成
    var posterData = ;

    posterRender(document.getElementById('{$gid}'), posterData);
```

如何开发
----

[](#如何开发)

- 准备环境

node 16+ (更低的版本没有测试，最好使用16版本开发)

pnpm

- 安装依赖

```
pnpm install
```

- 开发新的海报组件

在src/components/nodes/目录下面新增组件，并且在index.js添加import

可参照其他的组件开发

自定义组件接口说明

```
const newCompNode = observer(({node}) => {
    // 自定义组件的代码
});

newCompNode.propertySchema = {
    // 自定义组件属性的内容
    // 可参考已有的组件
};

newCompNode.setWrapStyle = (node) => {
    // 自定义wrap元素的属性
    // 可参考已有的组件
}

newCompNode.defaultValue = (node) => {
    // 往海报新增组件时, 给node对象的value属性添加的默认值
    // 如果propertySchema中有默认值，也会自动增加到node.value中
    // 该方法适用于需要动态设置的情况
}

newCompNode.resizeCallback = (node, width, height) => {
    // 组件大小改变时的回调
}

newCompNode.valueMap = {
    //属性组件一般采用value参数作为传值属性
    //但也有一些特殊的组件会采用其他的属性名称，例如 ImageUpload组件则是'defaultFileList'，这时就需要定义valueMap告诉程序其映射关系
    //img: 'defaultFileList'
}

//指定组件能否通过拖拉改变大小，默认是false
newCompNode.resize = true;

export const newComp = {
    // id 组件id号， label 值可以通过 options的nodeComponents[0].title定义
    Thumb: ({id, label}) => {
        return
            // 此处放缩略图的 svg内容
            {label}

    },
    Node: newCompNode,
    //像Var这种需要根据业务场景进行外部定义的组件，则需要设置成true
    custom: true,
    //自定义组件都需要设置成true，仅Poster这种系统组件才是false
    pure: true
}
```

###  Health Score

23

—

LowBetter than 26% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity8

Limited adoption so far

Community4

Small or concentrated contributor base

Maturity50

Maturing project, gaining track record

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~3 days

Total

6

Last Release

1208d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/15a0610fee78753bdad92fd45c3506455c0fd45ae51924797b1841d260495a3f?d=identicon)[tiderjian](/maintainers/tiderjian)

### Embed Badge

![Health badge](/badges/quansitech-qs-cusposter/health.svg)

```
[![Health](https://phpackages.com/badges/quansitech-qs-cusposter/health.svg)](https://phpackages.com/packages/quansitech-qs-cusposter)
```

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)