{"id":18938235,"url":"https://github.com/wechat-miniprogram/wxml-to-canvas","last_synced_at":"2025-08-22T07:31:13.961Z","repository":{"id":47494055,"uuid":"221392496","full_name":"wechat-miniprogram/wxml-to-canvas","owner":"wechat-miniprogram","description":null,"archived":false,"fork":false,"pushed_at":"2021-08-29T07:43:33.000Z","size":66,"stargazers_count":160,"open_issues_count":20,"forks_count":42,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-12-11T17:11:41.645Z","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":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wechat-miniprogram.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}},"created_at":"2019-11-13T06:53:31.000Z","updated_at":"2024-12-05T14:34:50.000Z","dependencies_parsed_at":"2022-09-06T21:40:38.467Z","dependency_job_id":null,"html_url":"https://github.com/wechat-miniprogram/wxml-to-canvas","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wechat-miniprogram%2Fwxml-to-canvas","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wechat-miniprogram%2Fwxml-to-canvas/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wechat-miniprogram%2Fwxml-to-canvas/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wechat-miniprogram%2Fwxml-to-canvas/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wechat-miniprogram","download_url":"https://codeload.github.com/wechat-miniprogram/wxml-to-canvas/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230568590,"owners_count":18246378,"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":[],"created_at":"2024-11-08T12:13:50.732Z","updated_at":"2024-12-20T10:08:59.410Z","avatar_url":"https://github.com/wechat-miniprogram.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# wxml-to-canvas\n\n[![](https://img.shields.io/npm/v/wxml-to-canvas)](https://www.npmjs.com/package/wxml-to-canvas)\n[![](https://img.shields.io/npm/l/wxml-to-canvas)](https://github.com/wechat-miniprogram/wxml-to-canvas)\n\n小程序内通过静态模板和样式绘制 canvas ，导出图片，可用于生成分享图等场景。[代码片段](https://developers.weixin.qq.com/s/r6UBlEm17pc6)\n\n\n## 使用方法\n\n#### Step1. npm 安装，参考 [小程序 npm 支持](https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html)\n\n```\nnpm install --save wxml-to-canvas\n```\n\n#### Step2. JSON 组件声明\n\n```\n{\n  \"usingComponents\": {\n    \"wxml-to-canvas\": \"wxml-to-canvas\",\n  }\n}\n```\n\n#### Step3. wxml 引入组件\n\n```\n\u003cvideo class=\"video\" src=\"{{src}}\"\u003e\n  \u003cwxml-to-canvas class=\"widget\"\u003e\u003c/wxml-to-canvas\u003e\n\u003c/video\u003e\n\u003cimage src=\"{{src}}\" style=\"width: {{width}}px; height: {{height}}px\"\u003e\u003c/image\u003e\n```\n\n##### 属性列表\n\n| 属性            | 类型    | 默认值  | 必填 | 说明                   |\n| --------------- | ------- | ------- | ---- | ---------------------- |\n| width           | Number  |   400      | 否   | 画布宽度           |\n| height           | Number  |   300      | 否   | 画布高度           |\n\n\n#### Step4. js 获取实例\n\n```\nconst {wxml, style} = require('./demo.js')\nPage({\n  data: {\n    src: ''\n  },\n  onLoad() {\n    this.widget = this.selectComponent('.widget')\n  },\n  renderToCanvas() {\n    const p1 = this.widget.renderToCanvas({ wxml, style })\n    p1.then((res) =\u003e {\n      this.container = res\n      this.extraImage()\n    })\n  },\n  extraImage() {\n    const p2 = this.widget.canvasToTempFilePath()\n    p2.then(res =\u003e {\n      this.setData({\n        src: res.tempFilePath,\n        width: this.container.layoutBox.width,\n        height: this.container.layoutBox.height\n      })\n    })\n  }\n})\n```\n\n## wxml 模板\n\n支持 `view`、`text`、`image` 三种标签，通过 class 匹配 style 对象中的样式。\n\n```\n\u003cview class=\"container\" \u003e\n  \u003cview class=\"item-box red\"\u003e\n  \u003c/view\u003e\n  \u003cview class=\"item-box green\" \u003e\n    \u003ctext class=\"text\"\u003eyeah!\u003c/text\u003e\n  \u003c/view\u003e\n  \u003cview class=\"item-box blue\"\u003e\n      \u003cimage class=\"img\" src=\"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3582589792,4046843010\u0026fm=26\u0026gp=0.jpg\"\u003e\u003c/image\u003e\n  \u003c/view\u003e\n\u003c/view\u003e\n```\n\n## 样式\n\n对象属性值为对应 wxml 标签的 cass 驼峰形式。**需为每个元素指定 width 和 height 属性**，否则会导致布局错误。\n\n存在多个 className 时，位置靠后的优先级更高，子元素会继承父级元素的可继承属性。\n\n元素均为 flex 布局。left/top 等 仅在 absolute 定位下生效。\n\n```\nconst style = {\n  container: {\n    width: 300,\n    height: 200,\n    flexDirection: 'row',\n    justifyContent: 'space-around',\n    backgroundColor: '#ccc',\n    alignItems: 'center',\n  },\n  itemBox: {\n    width: 80,\n    height: 60,\n  },\n  red: {\n    backgroundColor: '#ff0000'\n  },\n  green: {\n    backgroundColor: '#00ff00'\n  },\n  blue: {\n    backgroundColor: '#0000ff'\n  },\n  text: {\n    width: 80,\n    height: 60,\n    textAlign: 'center',\n    verticalAlign: 'middle',\n  }\n}\n```\n\n## 接口\n\n#### f1. `renderToCanvas({wxml, style}): Promise`\n\n渲染到 canvas，传入 wxml 模板 和 style 对象，返回的容器对象包含布局和样式信息。\n\n#### f2. `canvasToTempFilePath({fileType, quality}): Promise`\n\n提取画布中容器所在区域内容生成相同大小的图片，返回临时文件地址。\n\n`fileType` 支持 `jpg`、`png` 两种格式，quality 为图片的质量，目前仅对 jpg 有效。取值范围为 (0, 1]，不在范围内时当作 1.0 处理。\n\n## 支持的 css 属性\n\n### 布局相关\n\n| 属性名                | 支持的值或类型                                            | 默认值     |\n| --------------------- | --------------------------------------------------------- | ---------- |\n| width                 | number                                                    | 0          |\n| height                | number                                                    | 0          |\n| position              | relative, absolute                                        | relative   |\n| left                  | number                                                    | 0          |\n| top                   | number                                                    | 0          |\n| right                 | number                                                    | 0          |\n| bottom                | number                                                    | 0          |\n| margin                | number                                                    | 0          |\n| padding               | number                                                    | 0          |\n| borderWidth           | number                                                    | 0          |\n| borderRadius          | number                                                    | 0          |\n| flexDirection         | column, row                                               | row        |\n| flexShrink            | number                                                    | 1          |\n| flexGrow              | number                                                    |            |\n| flexWrap              | wrap, nowrap                                              | nowrap     |\n| justifyContent        | flex-start, center, flex-end, space-between, space-around | flex-start |\n| alignItems, alignSelf | flex-start, center, flex-end, stretch                     | flex-start |\n\n支持 marginLeft、paddingLeft 等\n\n### 文字\n\n| 属性名          | 支持的值或类型      | 默认值      |\n| --------------- | ------------------- | ----------- |\n| fontSize        | number              | 14          |\n| lineHeight      | number / string     | '1.4em'     |\n| textAlign       | left, center, right | left        |\n| verticalAlign   | top, middle, bottom | top         |\n| color           | string              | #000000     |\n| backgroundColor | string              | transparent |\n\nlineHeight 可取带 em 单位的字符串或数字类型。\n\n### 变形\n\n| 属性名 | 支持的值或类型 | 默认值 |\n| ------ | -------------- | ------ |\n| scale  | number         | 1      |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwechat-miniprogram%2Fwxml-to-canvas","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwechat-miniprogram%2Fwxml-to-canvas","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwechat-miniprogram%2Fwxml-to-canvas/lists"}