{"id":20144135,"url":"https://github.com/quansitech/qs-cusposter","last_synced_at":"2025-08-24T06:38:18.068Z","repository":{"id":88312636,"uuid":"605959408","full_name":"quansitech/qs-cusposter","owner":"quansitech","description":"海报编辑器","archived":false,"fork":false,"pushed_at":"2023-03-13T07:37:57.000Z","size":1938,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-13T15:50:42.965Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/quansitech.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-02-24T09:24:17.000Z","updated_at":"2023-02-24T09:25:21.000Z","dependencies_parsed_at":null,"dependency_job_id":"0c2e15aa-4868-4317-97ae-1d45226c0300","html_url":"https://github.com/quansitech/qs-cusposter","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/quansitech/qs-cusposter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quansitech%2Fqs-cusposter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quansitech%2Fqs-cusposter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quansitech%2Fqs-cusposter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quansitech%2Fqs-cusposter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/quansitech","download_url":"https://codeload.github.com/quansitech/qs-cusposter/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quansitech%2Fqs-cusposter/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271808987,"owners_count":24825625,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-24T02:00:11.135Z","response_time":111,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-13T22:08:58.377Z","updated_at":"2025-08-24T06:38:18.038Z","avatar_url":"https://github.com/quansitech.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# qs-cusform 自定义海报\n\n可通过拖拉形式让用户零代码定义自己的海报\n\n## 效果\n\n![](https://github.com/quansitech/files/blob/master/qs-cusposter-sample.png)\n\n## 安装\n\n```shell\ncomposer require quansitech/qs-cusposter\n```\n\n## 使用\n\n+ 海报设计生成器\n\n通过海报设计工作台，用户可自定义海报的背景图，显示的文字，组合图片，定义动态变量等构建想要的海报效果，保存即可提交海报的json数据\n\n```php\n// $this-\u003eview 为视图对象，一般是Controller类绑定的 view对象\n$builder = new \\QsCusPoster\\CusPosterDesignBuilder\\CusPosterDesignBuilder($this-\u003eview);\n// 和ListBuilder的setNIDByNode方法一样，设置当前高亮的菜单\n$builder-\u003esetNIDByNode(\"admin\", \"poster\", \"index\")\n//设置海报数据提交到的接口地址\n-\u003esetPostUrl(U(\"/admin/poster/save\"))\n//是否要启动oss上传模块\n-\u003esetOss(true)\n//设置图片上传地址，如果启动oss，则填写上传策略的获取地址\n-\u003esetUploadAction(U(\"/extends/aliyunOss/policyGet\"))\n//如果要编辑已有的海报，则需要通过这个方法传入海报数据\n-\u003esetPosterData($posterData)\n//添加自定义变量组件，第一个参数为变量键名， 第二个参数为展示名称， 第三个参数是预览用例\n-\u003eaddVarComponent('companyName', '公司名称', '全思科技')\n-\u003eaddVarComponent('companyType', '公司性质', '民营企业')\n//生成海报设计生成器页面\n-\u003ebuild()\n```\n\n+ 海报生成器\n\n根据海报数据，生成海报的canvas图片，如果有自定义动态变量，要先设置变量值\n\n```php\n//传入海报数据，注意是数组格式\n$builder = new \\QsCusPoster\\CusPosterBuilder($posterData);\n//假如有使用自定义变量组件，通过该方法来设定变量值\n$builder-\u003esetVarValue(\"companyName\", \"张三\")\n//设置生成canvas宽度，不设置的话则保持原图的宽度\n-\u003esetWidth(300)\n//设置生成canvas高度，不设置的话则保持原图的高度\n-\u003esetHeight(300)\n-\u003esetVarValue(\"companyType\", \"民营企业\")\n-\u003ebuild();\n```\n\n+ 前端通过js调用海报生成器\n\n跟前面的php生成器接管了所有的生成操作不同，前端js调用则需要自己加载js组件，决定如何生成海报,灵活性更高\n\n```php\n\u003cdiv id=\"poster\"\u003e\u003c/div\u003e\n// 扩展自动将该js映射到/public/cusposter/poster-render.js，如没有特殊改动，则是直接使用该地址即可获取到js文件\n\u003cscript src=\"/Public/cusposter/poster-render.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n    // $posterData可以用 CusPosterBuilder类的genData方法来生成\n    var posterData = \u003c?php echo json_encode($posterData, JSON_PRETTY_PRINT);?\u003e;\n    \n    posterRender(document.getElementById('{$gid}'), posterData);\n```\n\n\n## 如何开发\n\n+ 准备环境\n\nnode 16+ (更低的版本没有测试，最好使用16版本开发)\n\npnpm\n\n+ 安装依赖\n```shell\npnpm install\n```\n\n+ 开发新的海报组件\n\n在src/components/nodes/目录下面新增组件，并且在index.js添加import\n\n可参照其他的组件开发\n\n自定义组件接口说明\n\n```javascript\nconst newCompNode = observer(({node}) =\u003e {\n    // 自定义组件的代码\n});\n\nnewCompNode.propertySchema = {\n    // 自定义组件属性的内容\n    // 可参考已有的组件\n};\n\nnewCompNode.setWrapStyle = (node) =\u003e {\n    // 自定义wrap元素的属性\n    // 可参考已有的组件\n}\n\nnewCompNode.defaultValue = (node) =\u003e {\n    // 往海报新增组件时, 给node对象的value属性添加的默认值\n    // 如果propertySchema中有默认值，也会自动增加到node.value中\n    // 该方法适用于需要动态设置的情况\n}\n\nnewCompNode.resizeCallback = (node, width, height) =\u003e {\n    // 组件大小改变时的回调\n}\n\nnewCompNode.valueMap = {\n    //属性组件一般采用value参数作为传值属性\n    //但也有一些特殊的组件会采用其他的属性名称，例如 ImageUpload组件则是'defaultFileList'，这时就需要定义valueMap告诉程序其映射关系\n    //img: 'defaultFileList'\n}\n\n//指定组件能否通过拖拉改变大小，默认是false\nnewCompNode.resize = true;\n\n\n\nexport const newComp = {\n    // id 组件id号， label 值可以通过 options的nodeComponents[0].title定义\n    Thumb: ({id, label}) =\u003e {\n        return \u003cdiv className=\"qs-poster-node-thumb\" id={id} draggable={true}\u003e\n            // 此处放缩略图的 svg内容\n            \u003cspan className=\"drag-title\"\u003e{label}\u003c/span\u003e\n        \u003c/div\u003e\n    },\n    Node: newCompNode,\n    //像Var这种需要根据业务场景进行外部定义的组件，则需要设置成true\n    custom: true,\n    //自定义组件都需要设置成true，仅Poster这种系统组件才是false\n    pure: true\n}\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquansitech%2Fqs-cusposter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fquansitech%2Fqs-cusposter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquansitech%2Fqs-cusposter/lists"}