{"id":16940610,"url":"https://github.com/inottn/mini-poster","last_synced_at":"2025-07-30T12:34:22.331Z","repository":{"id":194199968,"uuid":"690426054","full_name":"inottn/mini-poster","owner":"inottn","description":"使用 canvas 轻松绘制小程序海报，支持微信、支付宝小程序","archived":false,"fork":false,"pushed_at":"2024-05-12T14:32:45.000Z","size":190,"stargazers_count":9,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-06-13T18:48:52.728Z","etag":null,"topics":["canvas","miniprogram","painter","poster","weixin"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/inottn.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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-09-12T07:10:38.000Z","updated_at":"2024-08-06T03:28:31.000Z","dependencies_parsed_at":null,"dependency_job_id":"2f7ed306-7d5f-4b16-94fc-ef3249305b3c","html_url":"https://github.com/inottn/mini-poster","commit_stats":null,"previous_names":["inottn/miniposter"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/inottn/mini-poster","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inottn%2Fmini-poster","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inottn%2Fmini-poster/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inottn%2Fmini-poster/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inottn%2Fmini-poster/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/inottn","download_url":"https://codeload.github.com/inottn/mini-poster/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inottn%2Fmini-poster/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266497000,"owners_count":23938723,"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-07-22T02:00:09.085Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"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":["canvas","miniprogram","painter","poster","weixin"],"created_at":"2024-10-13T21:07:29.123Z","updated_at":"2025-07-30T12:34:22.308Z","avatar_url":"https://github.com/inottn.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"logo\" src=\"https://fastly.jsdelivr.net/npm/@inottn/assets/miniposter/logo.svg\" width=\"420\" style=\"margin-bottom: 10px;\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e使用 canvas 轻松绘制小程序海报\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://img.shields.io/npm/v/%40inottn%2Fminiposter\" /\u003e\n  \u003cimg src=\"https://img.shields.io/bundlejs/size/%40inottn%2Fminiposter\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/tree_shaking-supported-4c1\" /\u003e\n  \u003cimg src=\"https://img.shields.io/npm/l/%40inottn%2Fminiposter\" /\u003e\n\u003c/p\u003e\n\n## 特性\n\n- 使用 TypeScript 编写，提供完整的类型定义\n- 使用 新版 canvas 2d 接口，性能更佳\n- 支持 微信 / 支付宝小程序\n\n## 安装\n\n使用 `pnpm` 安装:\n\n```bash\npnpm add @inottn/miniposter\n```\n\n使用 `yarn` 或 `npm` 安装:\n\n```bash\n# 使用 yarn\nyarn add @inottn/miniposter\n\n# 使用 npm\nnpm i @inottn/miniposter\n```\n\n## 快速上手\n\n```js\nconst miniposter = new MiniPoster(canvas, {\n  width: 375,\n  height: 600,\n  pixelRatio: 2,\n});\n\nconst renderConfig = {\n  backgroundColor: '#fff',\n  borderRadius: 8,\n  overflow: 'hidden',\n  children: [\n    {\n      type: 'image',\n      top: 12,\n      left: 12,\n      width: 32,\n      height: 32,\n      src: 'xxxxx',\n      borderRadius: 16,\n      objectFit: 'cover',\n    },\n    {\n      type: 'text',\n      top: 18,\n      left: 53,\n      content: 'hello',\n    },\n  ],\n}; // 渲染配置，参考下方文档\n\nminiposter.render(renderConfig).then(() =\u003e {\n  const exportConfig = { ... }; // 导出配置，参考下方文档\n\n  miniposter.export(exportConfig).then(({ tempFilePath }) =\u003e {\n    // tempFilePath 对应图片文件路径\n  });\n});\n```\n\n## 实例化 MiniPoster\n\n使用 canvas 和 config 实例化一个 miniposter 对象\n\n```js\nconst miniposter = new MiniPoster(canvas, config);\n```\n\n### canvas\n\n画布实例\n\n### config\n\n| 字段名     | 类型   | 默认值 | 说明             |\n| ---------- | ------ | ------ | ---------------- |\n| width      | number | -      | （必填）画布宽度 |\n| height     | number | -      | （必填）画布高度 |\n| pixelRatio | number | 1      | 像素缩放比       |\n\n## miniposter.render(config)\n\n### config\n\n| 字段名          | 类型     | 默认值 | 说明     |\n| --------------- | -------- | ------ | -------- |\n| backgroundColor | number   | -      | 背景颜色 |\n| borderRadius    | number   | 0      | 边框圆角 |\n| children        | object[] | -      | 子元素   |\n\n可绘制的元素类型如下：\n\n### type: container\n\n```js\nconst container = {\n  type: 'container',\n  // 其余属性，如下\n};\n```\n\n| 字段名          | 类型                   | 默认值    | 说明                                    |\n| --------------- | ---------------------- | --------- | --------------------------------------- |\n| left            | number \\| () =\u003e number | -         | （必填）相对父元素x轴的偏移             |\n| top             | number \\| () =\u003e number | -         | （必填）相对父元素y轴的偏移             |\n| width           | number                 | -         | （必填）容器宽度                        |\n| height          | number                 | -         | （必填）容器高度                        |\n| backgroundColor | string                 | -         | 背景颜色                                |\n| borderRadius    | number                 | 0         | 边框圆角                                |\n| overflow        | 'visible' \\| 'hidden'  | 'visible' | 子元素溢出时的行为，可参考对应 CSS 属性 |\n| children        | object[]               | -         | 子元素                                  |\n\n### type: image\n\n```js\nconst image = {\n  type: 'image',\n  // 其余属性，如下\n};\n```\n\n| 字段名          | 类型                           | 默认值 | 说明                                |\n| --------------- | ------------------------------ | ------ | ----------------------------------- |\n| left            | number \\| () =\u003e number         | -      | （必填）相对父元素x轴的偏移         |\n| top             | number \\| () =\u003e number         | -      | （必填）相对父元素y轴的偏移         |\n| width           | number                         | -      | （必填）图像宽度                    |\n| height          | number                         | -      | （必填）图像高度                    |\n| backgroundColor | string                         | -      | 背景颜色                            |\n| borderRadius    | number                         | 0      | 边框圆角                            |\n| objectFit       | 'fill' \\| 'contain' \\| 'cover' | 'fill' | 图片的展示模式，可参考对应 CSS 属性 |\n\n### type: text\n\n```js\nconst text = {\n  type: 'text',\n  // 其余属性，如下\n};\n```\n\n| 字段名         | 类型                          | 默认值             | 说明                                                 |\n| -------------- | ----------------------------- | ------------------ | ---------------------------------------------------- |\n| id             | string                        | -                  | 可以通过 getSize 方法获取对应的宽高信息              |\n| left           | number \\| () =\u003e number        | -                  | （必填）相对父元素x轴的偏移                          |\n| top            | number \\| () =\u003e number        | -                  | （必填）相对父元素y轴的偏移                          |\n| width          | number                        | -                  | 文本宽度                                             |\n| content        | string                        | -                  | 文本内容                                             |\n| color          | string                        | -                  | 字体颜色                                             |\n| fontSize       | number                        | 14                 | 字体大小                                             |\n| fontWeight     | string                        | 'normal'           | 字体的粗细程度，一些字体只提供 normal 和 bold 两种值 |\n| fontFamily     | string                        | 'sans-serif'       | 字体名称                                             |\n| fontSrc        | string                        | -                  | 字体资源地址                                         |\n| lineClamp      | number                        | -                  | 文本最大行数，超过即显示省略号，需设置文本宽度       |\n| lineHeight     | number                        | 字体大小的 1.43 倍 | 文本行高                                             |\n| textAlign      | 'left' \\| 'center' \\| 'right' | 'left'             | 文本的水平对齐方式，需设置文本宽度                   |\n| textDecoration | 'none' \\| 'line-through'      | 'none'             | 文本上的装饰性线条的外观，可参考对应 CSS 属性        |\n\n## miniposter.getSize(id)\n\n获取指定元素的宽高信息\n\n## miniposter.export(config)\n\n将当前画布指定区域导出为图片\n\n| 字段名     | 类型           | 默认值   | 说明                                                                        |\n| ---------- | -------------- | -------- | --------------------------------------------------------------------------- |\n| x          | number         | 0        | 指定的画布区域的左上角横坐标                                                |\n| y          | number         | 0        | 指定的画布区域的左上角纵坐标                                                |\n| width      | number         | 画布宽度 | 指定的画布区域的宽度                                                        |\n| height     | number         | 画布高度 | 指定的画布区域的高度                                                        |\n| destWidth  | number         | 画布宽度 | 输出的图片的宽度                                                            |\n| destHeight | number         | 画布高度 | 输出的图片的高度                                                            |\n| fileType   | 'png' \\| 'jpg' | 'png'    | 目标文件的类型                                                              |\n| quality    | number         | 1        | 图片的质量，目前仅对 jpg 有效。取值范围为 (0, 1]，不在范围内时当作 1 处理。 |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finottn%2Fmini-poster","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Finottn%2Fmini-poster","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finottn%2Fmini-poster/lists"}