{"id":13445874,"url":"https://github.com/jasondu/wxa-plugin-canvas","last_synced_at":"2025-05-14T10:15:00.807Z","repository":{"id":38359540,"uuid":"125088992","full_name":"jasondu/wxa-plugin-canvas","owner":"jasondu","description":"小程序海报组件-生成朋友圈分享海报并生成图片","archived":false,"fork":false,"pushed_at":"2024-05-08T07:27:01.000Z","size":8191,"stargazers_count":3148,"open_issues_count":146,"forks_count":493,"subscribers_count":69,"default_branch":"master","last_synced_at":"2025-04-03T19:11:05.722Z","etag":null,"topics":["canvas","weapp","weixin","wxapp"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jasondu.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":"2018-03-13T17:24:32.000Z","updated_at":"2025-04-03T09:58:40.000Z","dependencies_parsed_at":"2024-11-28T01:03:34.919Z","dependency_job_id":"a1c3934b-85c5-467d-a7de-a125c210f843","html_url":"https://github.com/jasondu/wxa-plugin-canvas","commit_stats":{"total_commits":71,"total_committers":10,"mean_commits":7.1,"dds":0.3802816901408451,"last_synced_commit":"ca7cf37c1c46eb992c5401952022ca9089b346b5"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jasondu%2Fwxa-plugin-canvas","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jasondu%2Fwxa-plugin-canvas/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jasondu%2Fwxa-plugin-canvas/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jasondu%2Fwxa-plugin-canvas/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jasondu","download_url":"https://codeload.github.com/jasondu/wxa-plugin-canvas/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248339681,"owners_count":21087300,"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","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","weapp","weixin","wxapp"],"created_at":"2024-07-31T05:00:41.047Z","updated_at":"2025-04-11T04:19:32.896Z","avatar_url":"https://github.com/jasondu.png","language":"JavaScript","funding_links":[],"categories":["组件","Libraries","JavaScript","UI模板"],"sub_categories":["Poster and Screenshot","3、小程序模板"],"readme":"# wxa-plugin-canvas\n小程序组件-小程序海报组件\n   \u003ca href=\"https://www.npmjs.com/package/wxa-plugin-canvas\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/wxa-plugin-canvas.svg?style=flat\" alt=\"npm\"\u003e\u003c/a\u003e\n   \u003ca href=\"https://www.npmjs.com/package/wxa-plugin-canvas\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/wxa-plugin-canvas.svg?style=flat\" alt=\"npm\"\u003e\u003c/a\u003e\n\n## 概述\nwxa-plugin-canvas是一个生成二维码海报的组件，通过非常简单的配置就可以生成精美的海报\n\n## 生成效果\n\u003cimg width=\"300\" src=\"https://github.com/jasondu/wxa-plugin-canvas/blob/master/demo.png\"\u003e\u003c/img\u003e\n\n## 组件原理说明文章\n\nhttps://juejin.im/post/5b7e48566fb9a01a1059543f\n\n## 使用之前\n\n使用 wxa-plugin-canvas 前，请确保你已经学习过微信官方的 [小程序简易教程](https://mp.weixin.qq.com/debug/wxadoc/dev/) 和 [自定义组件介绍](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/)。\n\n## 安装\n\n#### 方式一.通过 npm 安装 (推荐)\n\n小程序已经支持使用 npm 安装第三方包，详见 [npm 支持](https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html?search-key=npm)\n\n```\n# npm\nnpm i wxa-plugin-canvas -S --production\n\n# yarn\nyarn add wxa-plugin-canvas --production\n```\n\n#### 方式二.下载代码\n\n直接通过 git 下载 wxa-plugin-canvas 源代码，并将`miniprogram_dist`目录拷贝到自己的项目组件目录中\n\n## 使用组件\n\n```json\n{\n  \"usingComponents\": {\n\t\"poster\": \"wxa-plugin-canvas/poster\",\n  }\n}\n```\n\n接着就可以在 wxml 中直接使用组件\n\n```html\n\u003cposter id=\"poster\" config=\"{{posterConfig}}\" bind:success=\"onPosterSuccess\" bind:fail=\"onPosterFail\"\u003e\n    \u003cbutton\u003e点击生成海报\u003c/button\u003e\n\u003c/poster\u003e\n```\n\n## 使用注意事项\n\n1. 图片的域名**务必**添加到downloadFile合法域名中（开发设置-服务器域名-downloadFile合法域名）\n2. 如果要使用**异步生成海报**的方法，务必组件要加上`` id=\"poster\"``\n\n## 组件参数解释\n\n### config字段\n\n| 字段            | 类型                     | 必填 | 描述                                       |\n| --------------- | ------------------------ | ---- | ------------------------------------------ |\n| width           | Number(单位:rpx)         | 是   | 画布宽度                                   |\n| height          | Number(单位:rpx)         | 是   | 画布高度                                   |\n| backgroundColor | String                   | 否   | 画布颜色                                   |\n| debug           | Boolean                  | 否   | false隐藏canvas，true显示canvas，默认false |\n| pixelRatio      | Number                   | 否   | 1为一般，值越大越清晰 |\n| preload         | Boolean                  | 否   | true：图片资源预下载 默认false             |\n| hide-loading    | Boolean                  | 否   | true：隐藏loading 默认false                |\n| blocks          | Object Array（对象数组） | 否   | 看下文                                     |\n| texts           | Object Array（对象数组） | 否   | 看下文                                     |\n| images          | Object Array（对象数组） | 否   | 看下文                                     |\n| lines           | Object Array（对象数组） | 否   | 看下文                                     |\n\n\n\n### blocks字段\n\n| 字段名          | 类型             | 必填 | 描述                                   |\n| --------------- | ---------------- | ---- | -------------------------------------- |\n| x               | Number(单位:rpx) | 是   | 块的坐标                               |\n| y               | Number(单位:rpx) | 是   | 块的坐标                               |\n| width           | Number(单位:rpx) | 否   | 如果内部有文字，由文字宽度和内边距决定 |\n| height          | Number(单位:rpx) | 是   |                                        |\n| paddingLeft     | Number(单位:rpx) | 否   | 内左边距                               |\n| paddingRight    | Number(单位:rpx) | 否   | 内右边距                               |\n| borderWidth     | Number(单位:rpx) | 否   | 边框宽度                               |\n| borderColor     | String           | 否   | 边框颜色                               |\n| backgroundColor | String           | 否   | 背景颜色                               |\n| borderRadius    | Number(单位:rpx) | 否   | 圆角                                   |\n| text            | Object           | 否   | 块里面可以填充文字，参考texts字段解释  |\n| zIndex          | Int              | 否   | 层级，越大越高                         |\n\n### texts字段\n\n| 字段名         | 类型             | 必填 | 描述                                                         |\n| -------------- | ---------------- | ---- | ------------------------------------------------------------ |\n| x              | Number(单位:rpx) | 是   | 坐标                                                         |\n| y              | Number(单位:rpx) | 是   | 坐标                                                         |\n| text           | String\\|Object   | 是   | 当Object类型时，参数为text字段的参数，marginLeft、marginRight这两个字段可用（示例请看下文） |\n| fontSize       | Number(单位:rpx) | 是   | 文字大小                                                     |\n| color          | String           | 否   | 颜色                                                         |\n| opacity        | Int              | 否   | 1为不透明，0为透明                                           |\n| lineHeight     | Number(单位:rpx) | 否   | 行高                                                         |\n| lineNum        | Int              | 否   | 根据宽度换行，最多的行数                                     |\n| width          | Number(单位:rpx) | 否   | 没有指定为画布宽度                                           |\n| marginLeft     | Number(单位:rpx) | 否   | 当text字段为Object可以使用，用来控制多行文字间距             |\n| marginRight    | Number(单位:rpx) | 否   | 当text字段为Object可以使用，用来控制多行文字间距             |\n| textDecoration | String           | 否   | 目前只支持 line-through（贯穿线），默认为none                |\n| baseLine       | String           | 否   | top\\| middle\\|bottom基线对齐方式                             |\n| textAlign      | String           | 否   | left\\|center\\|right对齐方式                                  |\n| zIndex         | Int              | 否   | 层级，越大越高                                               |\n| fontFamily     | String           | 否   | 小程序默认字体为'sans-serif', 请输入小程序支持的字体，例如：'STSong' |\n| fontWeight     | String           | 否   | 'bold'加粗字体，目前小程序不支持 100 - 900 加粗            |\n| fontStyle      | String           | 否   | 'italic'倾斜字体                                          |\n\n### images字段\n\n| 字段         | 类型             | 必填 | 描述                                      |\n| ------------ | ---------------- | ---- | ----------------------------------------- |\n| x            | Number(单位:rpx) | 是   | 右上角的坐标                              |\n| y            | Number(单位:rpx) | 是   | 右上角的坐标                              |\n| url          | String           | 是   | 图片url（**需要添加到下载白名单域名中**）也支持本地图片 |\n| width        | Number(单位:rpx) | 是   | 宽度（**会根据图片的尺寸同比例缩放**）    |\n| height       | Number(单位:rpx) | 是   | 高度（**会根据图片的尺寸同比例缩放**）    |\n| borderRadius | Number(单位:rpx) | 否   | 圆角，跟css一样                           |\n| borderWidth  | Number(单位:rpx) | 否   | 边框宽度                                  |\n| borderColor  | String           | 否   | 边框颜色                                  |\n| zIndex       | Int              | 否   | 层级，越大越高                            |\n\n### lines字段\n\n| 字段   | 类型             | 必填 | 描述           |\n| ------ | ---------------- | ---- | -------------- |\n| startX | Number(单位:rpx) | 是   | 起始坐标       |\n| startY | Number(单位:rpx) | 是   | 起始坐标       |\n| endX   | Number(单位:rpx) | 是   | 终结坐标       |\n| endY   | Number(单位:rpx) | 是   | 终结坐标       |\n| width  | Number(单位:rpx) | 是   | 线的宽度       |\n| color  | String           | 否   | 线的颜色       |\n| zIndex | Int              | 否   | 层级，越大越高 |\n\n## 事件\n\n### success\n\n返回生成海报图片的本地url，一般做法是使用wx.previewImage预览海报，如下\n\n```javascript\nonPosterSuccess(e) {\n\tconst { detail } = e;\n\twx.previewImage({\n        current: detail,\n        urls: [detail]\n    })\n}\n```\n\n### fail\n\n返回错误信息\n\n## 异步生成海报\n\n有些场景可能需要发起ajax请求后才能获取生成海报的数据，这里提供了异步生成海报的方式。\n\n只需要引入组件中的``poster/poster.js``，如下调用就行了\n\n```javascript\nimport Poster from '../../miniprogram_dist/poster/poster';\nPage({\n    /**\n     * 异步生成海报\n     */\n    onCreatePoster() {\n    \t// setData配置数据\n    \tthis.setData({ posterConfig: {...} }, () =\u003e {\n        \tPoster.create(); \n    \t});\n    }\n})\n```\n## 自定义组件异步生成海报\n\n有些场景可能需要发起ajax请求后才能获取生成海报的数据，这里提供了异步生成海报的方式。\n\n只需要引入组件中的``poster/poster.js``，如下调用就行了，与page不同的是，需要在Poster.create中加入this。\n\n```javascript\nimport Poster from '../../miniprogram_dist/poster/poster';\nComponent({\n    /**\n     * 自定义组件异步生成海报\n     */\n    onCreatePoster() {\n    \t// setData配置数据\n    \tthis.setData({ posterConfig: {...} }, () =\u003e {\n        \tPoster.create(true, this); \n    \t});\n    }\n})\n```\n\n## 赞赏\n\u003cimg width=\"350\" src=\"https://github.com/jasondu/wxa-plugin-canvas/blob/master/zan.jpg\"\u003e\u003c/img\u003e\n\n## 问题反馈\n\n有什么问题可以直接提issue\n\n[提issue](https://github.com/jasondu/wxa-plugin-canvas/issues/new)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjasondu%2Fwxa-plugin-canvas","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjasondu%2Fwxa-plugin-canvas","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjasondu%2Fwxa-plugin-canvas/lists"}